flex常见属性容器

display:flex将一个元素定义为Flex布局容器的属性

flex-direction设置Flex容器主轴方向的属性

justify-content用于定义Flex容器内子元素在主轴上对齐方式

align-items用于定义Flex子元素在交叉轴上对齐方式

flex-wrap控制子元素在主轴方向空间不足是否换行

gap子元素之间间隙

---

“flex-direction” 是 CSS 中用于设置 Flex 容器主轴方向的属性。它常见的取值有：

• row（默认值）：主轴方向为水平方向，从左到右。
• row-reverse：主轴方向为水平方向，从右到左。
• column：主轴方向为垂直方向，从上到下。
• column-reverse：主轴方向为垂直方向，从下到上。

“justify-content”的常见取值及效果如下：

• “flex-start”：子元素沿主轴的起始位置对齐。
• “flex-end”：子元素沿主轴的结束位置对齐。
• “center”：子元素在主轴上居中对齐。
• “space-between”：子元素在主轴两端对齐，相邻子元素之间的间隔相等。
• “space-around”：每个子元素两侧的间隔相等，子元素之间的间隔比子元素与容器边缘的间隔大一倍。

“align-items”用于定义 Flex 容器内子元素在交叉轴上的对齐方式。其取值包括：

• “flex-start”（交叉轴的起点对齐）
• “flex-end”（交叉轴的终点对齐）
• “center”（交叉轴上居中对齐）
• “baseline”（项目的第一行文字的基线对齐）
• “stretch”（如果项目未设置高度或设为 auto，将占满整个容器的高度）

“flex-wrap”是 CSS Flex 布局中的一个属性，用于控制当 Flex 容器内的子元素在主轴方向上排列不下时是否换行。其常见的取值有：

• “nowrap”（默认值）：子元素在主轴方向上不换行，可能会导致子元素宽度收缩以适应容器。
• “wrap”：子元素在主轴方向上换行，新的一行会从容器的左侧开始。
• “wrap-reverse”：子元素在主轴方向上换行，新的一行会从容器的右侧开始。

gap：用于设置子元素之间的间距包括 

• row-gap （行间距）
• column-gap （列间距），或者使用 gap: <value> 同时设置行间距和列间距