详解CSS中的flex容器与flex属性

在CSS中，我们可以使用flex布局来创建灵活的布局方式。在flex布局中，有两个重要的概念：flex容器和flex项。在本文中，我们将深入探讨flex容器与flex属性，以便更好地理解如何使用flex布局。

什么是flex容器

flex容器是一个用于包含flex项的容器，这个容器将使用flex布局来排列这些项。我们可以通过在容器元素上设置display: flex; 或 display: inline-flex; 来创建一个flex容器。

以下是一个使用display: flex; 创建的flex容器的示例：

.container {
  display: flex;
}

flex属性详解

在flex布局中，我们还可以使用flex属性控制每个flex项在flex容器中的位置和大小。以下是具体的flex属性，及其对应的解释：

flex-grow

flex-grow属性用来指定flex项的拉伸因子，表示在空间有剩余的情况下，这个项应该占用剩余空间的多少。默认值为0，表示此项不会被拉伸，即使容器的空间有剩余。

以下是一个使用flex-grow样式的例子：

.item {
  flex-grow: 1;
}

此样式将通知浏览器将此项拉伸以填充剩余的空间。

flex-shrink

flex-shrink属性用于控制flex项在flex容器中的缩放因子。默认值为1，表示此项可以缩小，以适应可用空间；如果将其设置为0，则此项不应该缩小。

以下是一个使用flex-shrink样式的例子：

.item {
  flex-shrink: 0;
}

此样式将通知浏览器此项不可以缩小。

flex-basis

flex-basis属性用于指定flex项在flex容器中的基础大小。默认情况下，浏览器将使用项的内容大小的计算值作为基础大小。

以下是一个使用flex-basis样式的例子：

.item {
  flex-basis: 100px;
}

此样式将指定此项在flex容器中的基础大小为100像素。

flex

flex属性是flex-grow、flex-shrink和flex-basis这三个属性的缩写，可用于连续指定它们三个的值。

以下是一个使用flex样式的例子：

.item {
  flex: 1 0 100px;
}

此样式将指定此项在空间有剩余的情况下，将会拉伸自己（flex-grow: 1），但不会缩小（flex-shrink: 0），并且其基础大小为100像素（flex-basis: 100px）。

示例说明

以下是一个flex容器和其包含的三个flex项的示例：

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

.container {
  display: flex;
  justify-content: space-between;
}

.item {
  flex: 1;
  margin: 10px;
  height: 100px;
}

此示例中，flex容器使用display: flex;创建，并且使用justify-content: space-between;将其子项均匀地分布在容器中。而子项的flex属性设置为 flex: 1; 将使其平均分配可用空间，并使边距为10像素，高度为100像素。

以下是另一个flex容器和其包含的三个flex项的示例：

<div class="container">
  <div class="item">Item 1 Very Long Name</div>
  <div class="item">Item 2 Short</div>
  <div class="item">Item 3 Medium</div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 0 200px;
  margin: 10px;
  height: 100px;
}

此示例中，flex容器使用display: flex;创建，并且使用flex-wrap: wrap;使容器自动换行。子项的flex属性设置为 flex: 1 0 200px; 将使其平均分配可用空间，但不允许其缩小，并将基础大小设置为200像素。这将确保每个项始终具有足够的宽度，而不管其内容长度如何，边距和高度仍然保持不变。