基础

背景 旨在提供一种更有效的方式来布局、对齐和分配容器内项目之间的空间，通过改变容器的长宽、顺序以最佳填充可用空间。 主轴 main axis 弹性项目排列的主要轴。 横轴 cross axis 垂直于主轴的轴称为横轴。其方向取决于主轴方向。 cross-start/end 交叉轴的起始点和终点 交叉尺寸 cross size 主轴水平则 cross_size 是项目的 height，反之则为 weight

弹性容器 (父级)

启用弹性环境

.container {
  display: flex; //为所有子组件启用弹性环境
}

选择主轴方向 主轴决定了弹性项目的放置方向。

.container {
  flex-direction: row | row-reverse | column | column-reverse;//从右到左,从左到右,从上到下,从下到上
}

决定换行

.container {
  flex-wrap: nowrap | wrap | wrap-reverse;
  //位于一行，从上到下换行，从下到上换行
}

以上可简写为：

.container { flex-flow: column wrap; }

内容对齐

1. 主轴对齐

.container { justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe; }

2. 横轴对齐

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}

间隙，行间隙，列间隙

• gap: 10px;：同时设置行间隙和列间隙为 10px。
• gap: 10px 20px;：设置行间隙为 10px，列间隙为 20px（第一个值是行间隙，第二个值是列间隙）。
• row-gap: 10px;：单独设置行间隙为 10px。
• column-gap: 20px;：单独设置列间隙为 20px。

弹性项目 (子元素)

控制排序顺序

.item {
  order: 5; /* default is 0 */
}

相同 order 属性的按照源顺序排序。 弹性生长 定义了弹性项目在必要时增长的能力。

.item {
  flex-grow: 4; /* default 0 */
}

如果所有项目都 flex-grow 设置为 1，则容器中的剩余空间将平均分配给所有子项。如果其中一个子项的值为 2，则该子项将占用其他子项的两倍空间（图第二行） 弹性收缩 值越大，收缩越多。

.item {
  flex-shrink: 3; /* default 1 */
}