fiex布局

1:    什么是flex布局

flex是flexible box的缩写，意为弹性布局，当页面需要适应不同的屏幕大小以及设备类型时非常适用。

2:    容器属性

dispay

display属性用于定义一个容器的类型。使用dispay：flex时可以将一个元素变成弹性盒子，从而被指定为flex布局。

注：任何一个容器都可以指定为flex布局

例图：

效果图：

盒子：

效果：

flex常见的几种属性：

（1）flex-direction：设置主轴方向，默认为row水平方向。（2）column：主轴就是从上到下的垂直方向。（3）row：主轴就是从左到右的水平方向，默认值。（4）column-reverse：主轴是从上到下的垂直方向。（5）rpw-reverse：主轴从右到左到水平方向。

flex-wrap

flex-wrap属性用于定义弹性盒子是否可以换行。默认情况下，盒子不换行。可以使用flex-wrap属性来控制换行。常用的取值有:no wrap (不换行，默认值)、wrap(换行，第一行在上方)、wrap-reverse(换行，第一行在下方)。

结构伪造选择器

3:    演示图例

代码：

效果图：

 

4：总结 

flex 布局可以帮助我们轻松地实现各种复杂的布局效果。在使用 flex布局之前，我们需要掌握容器属性和项目属性，以及它们的取值和用法。只有掌握了这些知识，才能更好地利用flex布局来实现我们所需的布局效果。