CSS Flexbox 布局中的伸缩容器与伸缩项目

CSS Flexbox 布局是一种强大的工具，可以用于构建现代网页的布局和设计。Flexbox 布局中的两个主要概念是“伸缩容器”和“伸缩项目”，其中伸缩容器是一个包含伸缩项目的容器，而伸缩项目则是放置在伸缩容器中并按照一定的规则进行排列和对齐的元素。本文将详细介绍伸缩容器和伸缩项目在 Flexbox 布局中的使用。

伸缩容器

伸缩容器是 Flexbox 布局中的一个重要概念，它是一个包含伸缩项目的容器，并负责调整伸缩项目的大小和位置。一个伸缩容器拥有以下特点：

1. 使用 display:flex 或 display:inline-flex 属性声明。

.container {
  display: flex;
}

1. 默认情况下，伸缩容器中的伸缩项目会按照主轴方向排列，主轴方向由 flex-direction 属性决定。

.container {
  display: flex;
  flex-direction: row; /* 主轴方向为水平方向 */
}

1. 伸缩容器中的伸缩项目可以通过 flex-wrap 属性进行换行。

.container {
  display: flex;
  flex-wrap: wrap; /* 项目换行，主轴方向为水平方向 */
}

1. 伸缩容器中的伸缩项目可以通过 justify-content 属性在主轴上对齐。

.container {
  display: flex;
  justify-content: center; /* 水平中心对齐 */
}

1. 伸缩容器中的伸缩项目可以通过 align-items 和 align-content 属性在交叉轴上对齐。

.container {
  display: flex;
  align-items: center; /* 垂直中心对齐 */
}

.container {
  display: flex;
  align-content: center; /* 垂直居中 */
}

伸缩项目

伸缩项目是放置在伸缩容器中并按照一定的规则进行排列和对齐的元素。一个伸缩项目拥有以下特点：

1. 默认情况下，伸缩项目会填满整个伸缩容器，并在主轴上均分空间。

.container {
  display: flex;
  flex-direction: row;
}

.item {
  /* 默认填满整个伸缩容器 */
}

1. 伸缩项目可以通过 flex 属性进行自适应大小。

.item {
  flex: 1; /* 均分伸缩容器中的空间 */
}

.item {
  flex: 2; /* 占据伸缩容器中的 2 倍空间 */
}

1. 伸缩项目可以通过 order 属性进行排序。

.item-1 {
  order: 1; /* 放到伸缩容器的最后 */
}

.item-2 {
  order: -1; /* 放到伸缩容器的最前面 */
}

1. 伸缩项目可以通过 flex-grow 属性进行比例放大。

.item {
  flex-grow: 1; /* 在空间充足时，伸缩项目会持续放大 */
}

1. 伸缩项目可以通过 flex-shrink 属性进行比例缩小。

.item {
  flex-shrink: 1; /* 当伸缩容器空间不足时，伸缩项目会按比例缩小 */
}

1. 伸缩项目可以通过 flex-basis 属性进行基础大小设置。

.item {
  flex-basis: 100px; /* 设置伸缩项目的基础大小为 100 像素 */
}

示例代码

下面是一个简单的 Flexbox 布局示例，其中伸缩容器和伸缩项目的使用也体现了上述特点。

HTML 代码：

<div class="container">
  <div class="item item-1"></div>
  <div class="item item-2"></div>
  <div class="item item-3"></div>
  <div class="item item-4"></div>
</div>

CSS 代码：

-- -------------------- ---- -------
---------- -
  -------- -----
  ---------- -----
  ---------------- -------
  ------------ -------
  -------------- -------
  ------ ------
  ------- ------
  ------- --- ----- -----
-

----- -
  ----- - - -----
  ----------------- --------
  ------- --- ----- -----
  ------- -----
-

------- -
  ------ --
  ----- - - ------
-

------- -
  ------ --
  ----- - - -----
-

------- -
  ------ --
  ----- - - -----
-

------- -
  ----- - - ------
-
展开代码

在上述代码中，伸缩容器使用了 display:flex 属性表示是一个伸缩容器，并使用了 flex-wrap:wrap 属性进行换行，这样在容器宽度不足以容纳所有伸缩项目时，就会显示在下一行上。同时，使用 justify-content:center，align-items:center，align-content:center 属性，在主轴和交叉轴上对齐伸缩项目。

其中具体的伸缩项目的特点可以看到，item-1 使用了 order:2; 属性放到了伸缩容器的负载端，同时使用了 flex:1 0 200px; 属性表示在空间充足时会均分空间，但会占据 200px 的基础空间大小；item-2 使用了 order:3; 属性，同时使用了 flex:2 1 auto; 属性表示在空间充足时会被放大，并且在空间不足时可以被缩小；item-3 使用了 order:1; 属性，同时使用了 flex:1 1 auto; 属性表示在空间比其他伸缩项目多时会被自适应扩展，但不会被反弹缩小；item-4 使用了 flex:1 0 100px; 属性，表示在空间充足时会均分空间，但会占据 100px 的基础空间大小。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c1f78c314edc2684ae2fab