CSS 保持所有 flexbox 子元素相同大小

在本文中，我们将介绍如何使用 CSS 中的 flexbox 布局来保持所有子元素的相同大小。

阅读更多：CSS 教程

什么是 Flexbox 布局

Flexbox 是一个 CSS3 弹性布局模型，用于在容器中对子元素进行排列和对齐。使用 Flexbox，我们可以轻松地创建适应不同屏幕尺寸和设备的布局。Flexbox 的一个主要特点是它可以让子元素自动调整大小，以适应容器的宽度和高度。

如何保持所有子元素相同大小

要保持所有 flexbox 子元素相同大小，我们可以使用 flex 属性。flex 属性用于设置项目的缩放比例，默认值为 0 1 auto，其中 0 表示不缩放，1 表示可以缩放，并自动分配剩余空间，auto 表示按内容大小进行缩放。

下面是一个示例，展示了如何使用 flex 属性来保持所有子元素相同大小：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
    }
    .item {
      flex: 1;
      height: 100px;
      background-color: lightgray;
      border: 1px solid gray;
      margin: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">Item 1</div>
    <div class="item">Item 2</div>
    <div class="item">Item 3</div>
  </div>
</body>
</html>

在上面的示例中，我们创建了一个带有三个子元素的容器，并给它们设置了相同的 flex 属性值。这样，所有的子元素都会以相同的大小进行显示。

如何在 flexbox 子元素中保持相同宽度

有时我们希望在 flexbox 子元素中只保持宽度相同，高度可以根据内容自动调整。为了实现这个效果，我们可以使用 flex 属性的 0 0 auto 值。这样，子元素的宽度将不会缩放，并始终保持相同的尺寸。

下面是一个示例，展示了如何在 flexbox 子元素中保持相同宽度：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      justify-content: space-between;
    }
    .item {
      flex: 0 0 auto;
      width: 200px;
      height: auto;
      background-color: lightgray;
      border: 1px solid gray;
      margin: 10px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">
      <h3>Title 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="item">
      <h3>Title 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="item">
      <h3>Title 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</body>
</html>

在上面的示例中，我们使用 justify-content: space-between; 属性将子元素平均分布并且之间有空间。同时，我们给子元素设置了相同的宽度，并将 flex 属性设置为 0 0 auto，以确保宽度不会自动缩放。

如何在 flexbox 子元素中保持相同高度

有时我们希望在 flexbox 子元素中只保持高度相同，宽度可以根据内容自动调整。为了实现这个效果，我们可以使用 flex 属性的 1 1 0 值。这样，子元素的高度将不会缩放，并始终保持相同的尺寸。

下面是一个示例，展示了如何在 flexbox 子元素中保持相同高度：

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
    }
    .item {
      flex: 1 1 0;
      height: 200px;
      background-color: lightgray;
      border: 1px solid gray;
      margin: 10px;
      padding: 10px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="item">
      <h3>Title 1</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="item">
      <h3>Title 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
    <div class="item">
      <h3>Title 3</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</body>
</html>

在上面的示例中，我们给子元素设置了相同的高度，并将 flex 属性设置为 1 1 0，以确保高度不会自动缩放。