关于弹性布局的教程，网上已经有很多很多写得比较详细的，所以这里就不再细说啦
这篇文章将会把常用的属性整理出来，就当作是一个速查手册吧，方便以后使用
1、基本概念
设置
display: flex;的元素称为 Flex 容器，其中所有的子元素称为 Flex 项目容器存在两根用于定位的轴，分别是水平的 主轴 和垂直的 交叉轴，项目默认沿主轴排列
2、容器属性（设置在容器上）
- flex-direction：设置主轴的方向，可选值如下
- row（默认）：主轴沿水平方向，起点在左边
- row-reverse：主轴沿水平方向，起点在右边
- column：主轴沿垂直方向，起点在上边
- column-reverse：主轴沿垂直方向，起点在下边
- flex-wrap：定义换行的方式，可选值如下
- nowrap（默认）：不换行
- wrap：换行，第一行在上面
- wrap-reverse：换行，第一行在下面
- justify-content：定义项目在主轴上的对齐方式，可选值如下
- flex-start（默认）：起点对齐
- flex-end：终点对齐
- center：居中对齐
- space-between：两端对齐，项目之间间隔相等
- space-around：两端对齐，项目两侧间隔相等
- align-items：定义项目在交叉轴上的对齐方式，可选值如下
- flex-start：起点对齐
- flex-end：终点对齐
- center：居中对齐
- baseline：项目的第一行文字的基线对齐
- stretch（默认）：如果项目未设置 height 或者设置为 auto，那么项目占满容器的高度
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。