简单介绍弹性盒子布局flex属性教程

flexbox布局最常用的是flex属性。它可以设置父容器上的弹性盒子属性，包括弹性盒子的方向、对齐方式、伸缩比例、是否换行、是否开启主轴方向上的空间分配等等。下面web建站小编给大家简单介绍一下这些常用的flex属性值：

1. flex-direction
该属性指定了弹性容器中的主轴的方向，从而决定了弹性盒子排列的方向。默认值为row，表示水平方向从左到右。

flex-direction的可选值包括：
- row：默认值，从左到右方向；
- row-reverse：从右到左方向；
- column：从上到下方向；
- column-reverse：从下到上方向。

2. justify-cotent
该属性定义了子元素沿着主轴方向的对齐方式。注意，这个属性只有当所有元素的宽度之和小于父容器的宽度时才会生效。

justify-content的可选值包括：
- flex-start：所有元素顶端对齐；
- flex-end：所有元素底部对齐；
- center：所有子元素水平居中对齐；
- space-between：每个元素之间间隔相等，第一个元素靠左对齐，最后一个元素靠右对齐；
- space-around：每个元素两侧的空白间距相等，总空白间距是元素间距的两倍。

3. align-items
该属性定义了子元素在交叉轴（与主轴垂直的轴）上的对齐方式。

align-items的可选值包括：
- flex-start：交叉轴起点对齐；
- flex-end：交叉轴终点对齐；
- center：交叉轴居中对齐；
- baseline：以元素基线对齐，所有元素有基线时才有效；
- stretch：交叉轴占据整个父容器的高度。

4. flex-wrap
该属性指定了弹性盒子是否可以换行。默认情况下，所有元素将在同一行上排列，即不会换行。

flex-wrap的可选值包括：
- nowrap：默认值，不换行；
- wrap：换行，第一行在上方，默认方向为水平（row）；
- wrap-reverse：换行，第一行在下方，默认方向为水平（row）。

5. align-content
该属性定义了多行弹性盒子在交叉轴上的分布方式。这里涉及到多个弹性盒子之间的间距问题。

align-content的可选值包括：
- flex-start：多行下部对齐；
- flex-end：多行上部对齐；
- center：多行垂直居中对齐；
- space-between：多行间隔相等，第一行在上面，最后一行在下面；
- space-around：每行两侧的空白间距相等；
- stretch：默认值，各行会拉伸以填满剩余空间。