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布局来实现我们所需的布局效果。