CSS 弹性盒子CSS 弹性盒子（Flexbox）是一种用于在页面上布局元素的 CSS3 布局模型。它提供了一种更有效的

CSS 弹性盒子（Flexbox）是一种用于在页面上布局元素的 CSS3 布局模型。它提供了一种更有效的方式来对容器中的子元素进行对齐、方向和顺序的控制。

以下是一些基本的 Flexbox 属性和用法：

为容器设置 display: flex; 以启用 Flexbox 布局。

.container {
  display: flex;
}

使用 flex-direction 属性设置子元素的排列方向。

.container {
  display: flex;
  flex-direction: row; /* 默认值，子元素水平排列 */
  /* flex-direction: column; 子元素垂直排列 */
}

使用 justify-content 属性设置子元素在主轴上的对齐方式。

.container {
  display: flex;
  justify-content: flex-start; /* 默认值，子元素靠左对齐 */
  /* justify-content: center; 子元素居中对齐 */
  /* justify-content: space-between; 子元素间距平均分布 */
}

使用 align-items 属性设置子元素在交叉轴上的对齐方式。

.container {
  display: flex;
  align-items: stretch; /* 默认值，子元素沿交叉轴拉伸 */
  /* align-items: center; 子元素在交叉轴上居中对齐 */
}

使用 flex-wrap 属性设置子元素是否换行。

.container {
  display: flex;
  flex-wrap: nowrap; /* 默认值，子元素不换行 */
  /* flex-wrap: wrap; 子元素换行 */
}

使用 flex 属性设置子元素的弹性。

.item {
  flex: 1; /* 子元素平均分配容器剩余空间 */
}

6.1 flex 属性是一个简写属性，用于设置一个 flex 容器中的子元素（flex 项目）的弹性。它包含以下三个子属性：

flex-grow：定义子元素的放大比例，当容器有多余空间时，子元素按照比例分配空间。默认值为 0，表示子元素不会放大。
flex-shrink：定义子元素的缩小比例，当容器空间不足时，子元素按照比例收缩。默认值为 1，表示子元素会缩小。
flex-basis：定义子元素的基本尺寸，在分配多余空间之前，计算子元素应该占据的空间。默认值为 auto，表示根据子元素的内容大小计算。

flex 属性的语法为：那么如何实现一个如何实现一个 flex 布局。多个元素可以换行。但是最后一行无法撑满整个页面宽度，间距与上一行保持一致

flex: flex-grow flex-shrink flex-basis;
.item {
  flex: 1 1 auto;
}

你还可以使用以下简写形式：

flex: auto 等同于 flex: 1 1 auto
flex: none 等同于 flex: 0 0 auto
flex: <number> 等同于 flex: <number> 1 0，例如 flex: 2 等同于 flex: 2 1 0

注意：在实际使用中，通常只需要设置 flex-grow 属性，而 flex-shrink 和 flex-basis 可以保持默认值。例如，flex: 1 表示子元素会平均分配容器的剩余空间。

例子如何实现

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flexbox Example</title>
  <style>
    .container {
      display: flex;
      flex-wrap: wrap;
      margin-left: -10px; /* 负边距抵消子元素的左边距 */
    }

    .item {
      flex: 0 0 calc(20% - 10px); /* 设置子元素宽度为 1/3，减去间距 */
      margin-left: 10px; /* 设置子元素左边距 */
      margin-bottom: 10px; /* 设置子元素下边距 */
      box-sizing: border-box; /* 使宽度包含内边距和边框 */
      background-color: #f0f0f0; /* 设置背景颜色以便观察 */
      padding: 10px; /* 设置内边距 */
      text-align: center; /* 设置文本居中 */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
    <div class="item">7</div>
  </div>
</body>
</html>