本文介绍了Flex弹性布局的主要特点，包括主轴与交叉轴的概念，如何创建弹性容器，以及如何通过justify-content和align-items属性实现主轴和交叉轴上的对齐方式。同时，讲解了flex-direction、flex-wrap属性的作用，展示了不同设置下的布局效果，帮助读者掌握弹性布局的使用。
这节让我们来了解一下flex弹性布局。
弹性布局的特点
1.主轴与交叉轴：弹性容器具有主轴（main axis）和交叉轴（cross axis）。默认情况下，主轴是水平方向，交叉轴是垂直方向。
2.弹性容器：通过将父元素的display属性设置为flex或inline-flex来创建弹性容器。子元素的弹性项目：弹性容器中的每个子元素都成为弹性项目。子元素可以指定各自在主轴和交叉轴上的大小、顺序以及对齐方式等。
3.主轴对齐：弹性项目可以在主轴上按照一定比例分配空间，也可以使用justify-content属性定义主轴的对齐方式。
4.交叉轴对齐：弹性项目可以在交叉轴上进行对齐，包括顶部对齐、底部对齐、居中对齐等，使用align-items属性定义交叉轴对齐方式。
5.换行与自动调整：可控制弹性项目是否换行，并且具备自动调整元素大小的能力。
首先
我们做出一个flex容器，生成骨架结构后，添加一个盒子，修改样式
然后在flex容器中添加3个元素设置大小和颜色看看有什么效果，有两条轴默认主轴是水平方向
交叉轴是垂直方向，左上角为起点，下面是效果图
接下来我们来介绍有哪些属性
最低0.47元/天 解锁文章
1777
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
