如何使用 flexbox 使所有列大小相等 - CSS

Flexbox 是一种强大的布局模型，它能够极大地简化网页布局的开发，并使得在不同屏幕尺寸下的布局更加灵活。其中一个最常见的应用场景是让多列的大小相等。那么，如何使用 flexbox 来实现这一目的呢？

步骤

1. 将父容器设置为 flex 容器：

.container {
  display: flex;
}

2. 设置子元素的 flex-grow 属性为 1，表示它可以使用剩余空间的所有可用空间：

.container > * {
  flex-grow: 1;
}

3. 可选：如果希望所有列都有相同的最小宽度，可以设置子元素的 min-width 属性，例如：

.container > * {
  flex-grow: 1;
  min-width: 200px;
}

其中，min-width 属性的值可以根据实际情况进行调整。

示例

<div class="container">
  <div class="column">Column 1</div>
  <div class="column">Column 2</div>
  <div class="column">Column 3</div>
</div>

.container {
  display: flex;
}

.container > * {
  flex-grow: 1;
  min-width: 200px;
}

.column {
  background-color: #f1f1f1;
  border: 1px solid #333;
  padding: 10px;
}

效果如下图所示：

结论

使用 flexbox 可以很容易地实现所有列大小相等的效果，只需要设置父容器为 flex 容器，子元素的 flex-grow 属性为 1，以及可选的 min-width 属性即可。