CSS flex: 1 的含义是什么

在本文中，我们将介绍CSS中flex: 1的含义以及它在布局中的应用。flex是一种CSS属性，它用于创建灵活的、自适应的布局。通过使用flex属性，我们可以轻松地控制元素在容器中的分布和大小调整。

阅读更多：CSS 教程

flex属性简介

flex是CSS3引入的新属性，用于指定灵活容器中的项目如何分配可用空间。它的语法是flex: <flex-grow> <flex-shrink> <flex-basis>。

flex-grow：定义项目的放大比例，默认为0，即如果容器有剩余空间，项目不会放大。
flex-shrink：定义项目的缩小比例，默认为1，即如果容器空间不足，项目将缩小。
flex-basis：定义项目在主轴方向上的初始大小，默认为auto。

示例1：简单的等宽布局

让我们来看一个简单的例子，展示flex: 1在布局中的应用。假设我们有一个div容器，里面包含3个子元素。我们希望这些子元素平均分配容器的宽度，并且在容器大小变化时，它们的大小也相应调整。

HTML结构如下：

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

CSS代码如下：

.container {
  display: flex;
}

.item {
  flex: 1;
}

在上述代码中，通过设置.container的display属性为flex，我们将容器转换为一个flex容器。然后，通过给.item设置flex: 1，我们指定子元素在主轴上平均分配剩余空间。

这样，当容器的宽度变化时，子元素的宽度也会相应变化。例如，如果容器的宽度为500px，那么每个子元素将会占据500/3=166.67px的宽度。

示例2：自适应布局

除了创建等宽布局，flex: 1还可以用于创建自适应布局。在这种布局中，一个或多个子元素的大小会根据容器的大小自动调整。让我们看一个示例：

HTML结构如下：

<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="content">Content</div>
</div>

CSS代码如下：

.container {
  display: flex;
}

.sidebar {
  flex: 1;
}

.content {
  flex: 2;
}

在上述代码中，我们使用了一个容器和两个子元素，分别为sidebar和content。给sidebar设置了flex: 1，content设置了flex: 2。这意味着，sidebar将占据总空间的1/3，而content将占据总空间的2/3。

这样，当容器的宽度变化时，sidebar和content的大小也会自动调整，以适应容器的变化。

示例3：嵌套布局

除了在单个容器中使用flex: 1外，我们还可以将其应用于嵌套布局中的多个容器。这样，我们可以创建更复杂的布局结构。让我们看一个示例：

HTML结构如下：

<div class="container">
  <div class="sidebar">Sidebar</div>
  <div class="content">
    <div class="subcontent">Subcontent 1</div>
    <div class="subcontent">Subcontent 2</div>
  </div>
</div>

CSS代码如下：

.container {
  display: flex;
}

.sidebar {
  flex: 1;
}

.content {
  flex: 2;
  display: flex;
  flex-direction: column;
}

.subcontent {
  flex: 1;
}

在上述代码中，我们将sidebar和content放置在一个容器中。给sidebar设置了flex: 1，content设置了flex: 2。此外，我们还将content设置为flex容器，并指定了其flex-direction为column，以实现垂直方向上的布局。

然后，我们将两个子元素subcontent添加到content中，并为它们设置flex: 1。这样，subcontent会平均分配content的剩余空间，并根据content的大小自动调整。