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>同时设置行间距和列间距