这节让我们来了解一下flex弹性布局。
弹性布局的特点
1.主轴与交叉轴:弹性容器具有主轴(main axis)和交叉轴(cross axis)。默认情况下,主轴是水平方向,交叉轴是垂直方向。
2.弹性容器:通过将父元素的display属性设置为flex或inline-flex来创建弹性容器。子元素的弹性项目:弹性容器中的每个子元素都成为弹性项目。子元素可以指定各自在主轴和交叉轴上的大小、顺序以及对齐方式等。
3.主轴对齐:弹性项目可以在主轴上按照一定比例分配空间,也可以使用justify-content属性定义主轴的对齐方式。
4.交叉轴对齐:弹性项目可以在交叉轴上进行对齐,包括顶部对齐、底部对齐、居中对齐等,使用align-items属性定义交叉轴对齐方式。
5.换行与自动调整:可控制弹性项目是否换行,并且具备自动调整元素大小的能力。
首先
我们做出一个flex容器,生成骨架结构后,添加一个盒子,修改样式
然后在flex容器中添加3个元素设置大小和颜色看看有什么效果,有两条轴默认主轴是水平方向
交叉轴是垂直方向,左上角为起点,下面是效果图
接下来我们来介绍有哪些属性