CSS3 弹性盒子（Flexbox）是一种用于在容器中进行布局的现代 CSS 技术。Flexbox 提供了一种更灵活、更直观的布局方式，使得元素在容器内的对齐和分布变得更加简单。以下是一个基本的 Flexbox 示例：

HTML：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>CSS3 Flexbox Example</title>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
    </div>
</body>
</html>

CSS (styles.css)：
/* Flex 容器样式 */
.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 200px;
    background-color: #f1c40f;
}

/* Flex 项样式 */
.flex-item {
    width: 50px;
    height: 50px;
    background-color: #3498db;
    color: #fff;
    text-align: center;
    line-height: 50px;
}

这个示例创建了一个包含三个子元素的 Flex 容器。.flex-container 类设置了 display: flex;，将其设为 Flexbox 容器。justify-content: space-between; 属性使得子元素在主轴上平均分布，align-items: center; 属性使得子元素在交叉轴上居中对齐。每个子元素都有类名 .flex-item，设置了固定的宽度、高度和背景颜色。

Flexbox 提供了很多强大的布局工具，你可以根据设计需求进一步调整样式和属性。Flexbox 的灵活性和简单性使其成为现代 web 布局的首选之一。


转载请注明出处：http://www.pingtaimeng.com/article/detail/12574/CSS