display: flex

display: flex 是 CSS 中的布局属性之一，它可以让我们更加灵活地控制元素的排布方式，特别是在响应式布局方面提供了更高的自由度。下面是关于 display: flex 的详细介绍。

基本用法

在 CSS 中使用 display: flex 属性来定义一个元素为 Flex 容器。例如：

.container {
  display: flex;
}

排列方向

通过 flex-direction 属性控制 Flex 容器内部元素的排列方向，常见的有以下四种：

• row（默认值）：水平方向从左到右排列
• row-reverse：水平方向从右到左排列
• column：垂直方向从上到下排列
• column-reverse：垂直方向从下到上排列

.container {
  display: flex;
  flex-direction: row; /* 水平方向从左到右排列 */
  /* flex-direction: row-reverse; */ /* 水平方向从右到左排列 */
  /* flex-direction: column; */ /* 垂直方向从上到下排列 */
  /* flex-direction: column-reverse; */ /* 垂直方向从下到上排列 */
}

元素排列顺序

通过 order 属性可以指定 Flex 容器内部某个元素的排列顺序，该属性的取值为整数，默认值为 0。元素的排列顺序越小，越靠前排列。例如：

.item {
  order: 1;
}

元素间间距

通过 justify-content 和 align-items 属性可以控制 Flex 容器内元素的间距。其中，justify-content 属性控制水平方向上的排列方式，align-items 控制垂直方向上的排列方式。

justify-content 常见的取值有以下几种：

• flex-start：元素紧靠容器起始位置排列
• center：元素居中排列
• flex-end：元素紧靠容器结束位置排列
• space-between：元素均分容器剩余空间
• space-around：元素均分容器空间，并在两侧留出空隙

align-items 常见的取值有以下几种：

• flex-start：元素紧靠容器起始位置排列
• center：元素居中排列
• flex-end：元素紧靠容器结束位置排列
• stretch：元素占满容器高度

.container {
  display: flex;
  justify-content: center; /* 元素居中排列 */
  align-items: center; /* 元素居中排列 */
  /* justify-content: flex-start; */ /* 元素紧靠容器起始位置排列 */
  /* justify-content: flex-end; */ /* 元素紧靠容器结束位置排列 */
  /* justify-content: space-between; */ /* 元素均分容器剩余空间 */
  /* justify-content: space-around; */ /* 元素均分容器空间，并在两侧留出空隙 */
  /* align-items: flex-start; */ /* 元素紧靠容器起始位置排列 */
  /* align-items: flex-end; */ /* 元素紧靠容器结束位置排列 */
  /* align-items: stretch; */ /* 元素占满容器高度 */
}

元素宽高自适应

在 Flex 容器中，元素的宽度和高度默认是自适应的，除非我们显式指定。通过 flex-grow、flex-shrink 和 flex-basis 这三个属性可以控制元素的自适应。

• flex-grow 属性控制元素在剩余空间中所占比例，数值越大，所占比例越大。
• flex-shrink 属性控制元素在空间不足时缩小的比例，数值越大，缩小比例越大。
• flex-basis 属性指定元素在 Flex 容器中默认的宽度或高度，数值可以是百分比或像素。

.item {
  flex-grow: 1; /* 元素在剩余空间中所占比例为 1 */
  /* flex-shrink: 1; */ /* 元素在空间不足时缩小的比例为 1 */
  /* flex-basis: 0; */ /* 元素在 Flex 容器中默认的宽度或高度为 0 */
}

元素对齐方式

通过 justify-self 和 align-self 属性可以控制单个元素的对齐方式，该属性只对单个元素生效。其中，justify-self 属性控制水平方向上的对齐方式，align-self 控制垂直方向上的对齐方式。

justify-self 和 align-self 的取值和 justify-content 和 align-items 的取值类似，但是它们只控制单个元素的对齐方式。

.item {
  justify-self: center; /* 元素水平方向居中 */
  align-self: center; /* 元素垂直方向居中 */
}

小结

通过以上几个方面的介绍，我们可以看到 display: flex 是一种极为灵活的布局方式，特别是在响应式布局方面具有非常高的自由度。同时，我们也要注意到其兼容性存在较大的问题，因此在实践中需要谨慎使用，针对不同的场景选择不同的布局方式。