css3 flex布局举例

近年来，CSS3的出现改变了页面布局的方式，其中flex布局成为了人们最喜欢使用的一种方式。下面就来举例说明CSS3 flex布局的应用。

    .container {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
    }
    .box {
            width: 100px;
            height: 100px;
            margin: 10px;
    }
    

上述代码是一个简单的flex布局实例。首先，我们定义了一个flex容器，也就是包含这些子项的父级容器。然后，使用了"flex-wrap: wrap"属性，允许子项在父级容器中自动换行；"justify-content: center"属性可使子项在主轴上水平居中。

而下面的代码则是子项的样式。因为flex布局是基于一定的均分原则，所以子项的宽度需要固定。在这里，我们将宽高都设置为100像素，并且通过"margin"属性来控制子项之间的距离。

    div class="container">
            div class="box">
    /div>
            div class="box">
    /div>
            div class="box">
    /div>
            div class="box">
    /div>
            div class="box">
    /div>
            div class="box">
    /div>
        /div>
    

最后，我们将子项放入容器中。在这个例子中，我们一共放了六个子项，但是由于采用了自动换行的方式，所以在页面上并不会显示成一整行，而是自动分为两行。并且通过容器的属性控制，这六个子项会在容器中居中对齐。

总之，CSS3的flex布局通过其直观、灵活的方式，成为了广大前端开发人员喜欢的一种布局方式。通过灵活的调整主轴和交叉轴的方向和对齐方式，我们可以在不同的设备上实现流畅、美观的页面布局。希望这个例子能对大家有所帮助！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！