Web弹性布局flex

Web弹性布局（flex）是一种用于创建灵活的、自适应的布局的CSS属性。它可以帮助我们更好地控制和排列网页中的元素。下面是一些关于Web弹性布局的基本配置命令：

1. 设置弹性容器：

display: flex;

这个属性将元素的display属性设置为flex，将其变为一个弹性容器。

2. 设置主轴对齐方式：

justify-content: flex-start; /* 从左到右，起点开始排列盒子 */
justify-content: flex-end; /* 从右到左，终点开始排列盒子 */
justify-content: center; /* 盒子水平居中 */
justify-content: space-between; /* 两边靠边，中间自适应 */
justify-content: space-around; /* 盒子自适应，盒子中间的距离1:1平均分 */
justify-content: space-evenly; /* 盒子自适应，按照1比2的比例平均分 */

这些属性用于设置弹性容器中元素在主轴上的对齐方式。

3. 设置交叉轴对齐方式：

align-items: flex-start; /* 从上到下，起点开始排列盒子 */
align-items: flex-end; /* 从下到上，终点开始排列盒子 */
align-items: center; /* 盒子垂直居中 */
align-items: stretch; /* 盒子拉伸填充整个容器 */
align-items: baseline; /* 盒子按照基线对齐 */

这些属性用于设置弹性容器中元素在交叉轴上的对齐方式。

4. 设置元素的排列顺序：

order: 1; /* 设置元素的排列顺序，数值越小越靠前 */

这个属性用于设置弹性容器中元素的排列顺序。

5. 设置元素的伸缩性：

flex-grow: 1; /* 元素的伸缩比例，默认为0，不伸缩 */
flex-shrink: 1; /* 元素的收缩比例，默认为1，可收缩 */
flex-basis: auto; /* 元素的基准值，默认为auto，根据内容自动计算 */

这些属性用于设置弹性容器中元素的伸缩性。

6. 设置元素的换行方式：

flex-wrap: nowrap; /* 不换行，所有元素在一行显示 */
flex-wrap: wrap; /* 换行，元素自动换行显示 */
flex-wrap: wrap-reverse; /* 反向换行，元素自动反向换行显示 */

这个属性用于设置弹性容器中元素的换行方式。