css中display: flex；的布局方式以及属性和属性值怎么用的详细解释

display: flex; 是 CSS 中的一种布局方式，它通过设置 display 属性值为 flex 来启用 Flexbox 布局模型。Flexbox 是一种用于在容器内分配和对齐子项的布局方法，旨在提供一种更加有效的方式来排列、对齐和分配容器内元素的空间，即使它们的大小是未知的或者是动态的。

以下是 Flexbox 布局的主要组成部分和概念：

Flex Container（弹性容器）

当你在一个元素上设置 display: flex; 时，这个元素就变成了一个 Flex 容器（flex container），它的直接子元素将成为 Flex 项（flex items）。

Flex Items（弹性子项）

Flex 容器内的直接子元素自动成为 Flex 项。Flex 项可以使用 Flexbox 的属性进行布局。

主轴（Main Axis）

Flex 容器的主轴是 Flex 项的主要布局方向。默认情况下，主轴是水平的，从左到右。

交叉轴（Cross Axis）

交叉轴是垂直于主轴的轴。如果主轴是水平的，交叉轴就是垂直的，从上到下。

Flexbox 的关键属性

以下是一些重要的 Flexbox 属性，它们用于控制 Flex 容器和 Flex 项的布局：

Flex Container 的属性：

• flex-direction：定义了主轴的方向，决定了 Flex 项的排列方向（row, row-reverse, column, column-reverse）。

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。

• flex-wrap：定义了容器是单行还是多行，以及如何处理子项溢出的情况，如果一行不足以放下所有 Flex 项，是否应该换行。（nowrap, wrap, wrap-reverse）。

• nowrap（默认值）：所有 Flex 项都在一行显示，可能导致溢出。
• wrap：Flex 项可以在必要时换行。
• wrap-reverse：Flex 项可以在必要时换行，但是以相反的顺序。

• flex-flow：是 flex-direction 和 flex-wrap 的简写形式。

  flex-flow 是 flex-direction 和 flex-wrap 的简写形式，默认值为 row nowrap。

• justify-content：定义了 Flex 项在主轴上的对齐方式（flex-start, flex-end, center, space-between, space-around, space-evenly）。

• flex-start（默认值）：Flex 项从主轴的起点开始排列。
• flex-end：Flex 项从主轴的终点开始排列。
• center：Flex 项在主轴上居中排列。
• space-between：Flex 项平均分布，第一项在起点，最后一项在终点。
• space-around：Flex 项平均分布，每个 Flex 项两侧都留有相等的空间。
• space-evenly：Flex 项平均分布，包括两端。

• align-items：定义了 Flex 项在交叉轴上的对齐方式（stretch, flex-start, flex-end, center, baseline）。

• stretch（默认值）：Flex 项拉伸以填充容器（如果未设置高度或设为 auto）。
• flex-start：Flex 项在交叉轴的起点对齐。
• flex-end：Flex 项在交叉轴的终点对齐。
• center：Flex 项在交叉轴上居中对齐。
• baseline：Flex 项根据它们的基线对齐。

• align-content：当有多行 Flex 项时，这个属性定义了这些行在交叉轴上的对齐方式（stretch, flex-start, flex-end, center, space-between, space-around, space-evenly）。

• stretch（默认值）：Flex 项拉伸以填充容器（如果未设置高度或设为 auto）。
• flex-start：Flex 项在交叉轴的起点对齐。
• flex-end：Flex 项在交叉轴的终点对齐。
• center：Flex 项在交叉轴上居中对齐。
• space-between：Flex 项在交叉轴上平均分布，第一行在起点，最后一行在终点。
• space-around：Flex 项在交叉轴上平均分布，每行两侧都留有相等的空间。
• space-evenly：Flex 项在交叉轴上平均分布，包括两端。

Flex Item 的属性：

• order：定义了 Flex 项的排列顺序。

  order 属性接受一个整数作为值，默认值为 0。Flex 项按照 order 值的大小升序排列。值越小，排列越靠前。

• flex-grow：定义了 Flex 项的放大比例，即如果存在剩余空间，这个 Flex 项应该放大的比例。

  flex-grow 属性接受一个正数作为值，默认值为 0。它定义了 Flex 项的放大比例，即如果存在剩余空间，这个 Flex 项应该放大的比例。

• flex-shrink：定义了 Flex 项的缩小比例，即如果空间不足，这个 Flex 项应该缩小的比例。

  flex-shrink 属性接受一个正数作为值，默认值为 1。它定义了 Flex 项的缩小比例，即如果空间不足，这个 Flex 项应该缩小的比例。

• flex-basis：定义了在分配多余空间之前，Flex 项的默认大小。

  flex-basis 属性定义了在分配多余空间之前，Flex 项的默认大小。它可以设置为长度（如 100px）或关键字（如 auto）。默认值为 auto，表示 Flex 项的大小取决于其内容。

• flex：是 flex-grow, flex-shrink 和 flex-basis 的简写形式。

  flex 是 flex-grow, flex-shrink, 和 flex-basis 的简写形式，默认值为 0 1 auto。例如，flex: 1 等同于 flex: 1 1 0%。

• align-self：允许单个 Flex 项有与其他 Flex 项不一样的对齐方式，可以覆盖 align-items 属性。

• auto（默认值）：继承父元素的 align-items 属性。
• stretch、flex-start、flex-end、center、baseline：与 align-items 属性的值相同。

通过这些属性，你可以精确地控制 Flexbox 布局中的 Flex 容器和 Flex 项的行为，从而创建出各种灵活和响应式的布局。

示例

以下是一个简单的 Flexbox 布局的例子：

html

复制

<div style="display: flex; justify-content: space-between; align-items: center;">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>

在这个例子中，div 容器是一个 Flex 容器，它包含三个 Flex 项。justify-content: space-between; 使得 Flex 项在主轴上平均分布，两边留有空间。align-items: center; 使得 Flex 项在交叉轴上居中对齐。

Flexbox 布局提供了一种更加灵活和强大的方式来处理布局问题，尤其是在响应式设计中。通过掌握 Flexbox 的属性，你可以轻松地创建各种复杂的布局。