flex布局

Flex 布局（Flexbox）是一种用于在容器中布局子元素的弹性布局模型。它提供了在水平或垂直方向上对子元素进行对齐、分配空间的一种方式，以便更有效地设计和管理页面布局。

以下是 Flex 布局中常用的属性：

一、容器属性（作用于父元素，即容器）

1.display：flex

用于定义一个容器是一个 Flex 容器。取值为 flex。

.container {
  display: flex;
}

2.flex-direction：

定义主轴的方向（子元素排列的方向）。

可选值：row（默认值，水平方向）、row-reverse（水平方向，反向排列）、column（垂直方向）、column-reverse（垂直方向，反向排列）。

.container {
  flex-direction: row;
}

3.justify-content：

定义了子元素在主轴上的对齐方式。

可选值：
flex-start（默认值，靠近主轴起点对齐）
flex-end（靠近主轴终点对齐）
center（居中对齐）
space-between（平均分配项目之间的空间，但没有在首尾两侧留下额外的空间）
space-around（平均分配项目之间的空间，同时在首尾两侧也留有一半的空间）
space-evenly（用于在主轴上均匀分布子元素，同时保留首尾两端的空白间隔。）

.container {
  justify-content: center;
}

4.align-items：

定义了子元素在交叉轴上的对齐方式。

可选值：
flex-start: 交叉轴的起点对齐。
flex-end: 交叉轴的终点对齐。
center: 交叉轴的中点对齐。
baseline: 子元素的基线对齐。
stretch: 默认值，子元素被拉伸以适应容器。

.container {
  align-items: center;
}

5.align-self：

用于定义单个子元素在交叉轴上的对齐方式，覆盖 align-items 的值。

可选值flex-start（默认值，靠近主轴起点对齐）、flex-end（靠近主轴终点对齐）、center（居中对齐）、space-between（两端对齐，子元素之间等距分布）、space-around（子元素两侧均匀分布）。

.item {
  align-self: flex-start;
}

二、项目属性（作用于子元素，即项目）

1.order：

定义子元素的排列顺序。数值越小，越靠近主轴起点。

默认值为 0。

.item {
  order: 1;
}

2.flex-grow：

定义子元素的放大比例，用于分配剩余空间。

默认值为 0，即不放大。

.item {
  flex-grow: 1;
}

3.flex-shrink：

定义子元素的缩小比例，用于收缩溢出空间。

默认值为 1。

.item {
  flex-shrink: 0;
}

4.flex-basis：

定义子元素在分配多余空间之前的基础大小。

默认值为 auto，即由内容决定。

.item {
  flex-basis: 50%;
}

5.flex：

flex 是 flex-grow、flex-shrink 和 flex-basis 的缩写。

默认值为 0 1 auto。

.item {
  flex: 1 0 50%;
}

这些属性提供了灵活的布局选项，使得设计者可以更好地控制子元素的排列和分布。你可以根据具体的布局需求使用这些属性。