CSS Flexbox 技巧：自适应两列等高网格布局

在前端开发中，网格布局是常见的布局方式之一。而要实现一个等高的两列网格布局，往往需要使用到一些 hack 或者 JavaScript 来实现。但是使用 CSS Flexbox 可以轻松地实现这个效果，并且不需要任何 hack 或者 JavaScript。

Flexbox 简介

CSS Flexbox 是一种新的布局方式，它可以让容器中的元素按照一定的规则排列。Flexbox 有两个关键的概念：容器和项目。容器是包含着项目的父元素，而项目则是容器的直接子元素。Flexbox 的布局方式是在容器上定义的，而不是在项目上定义的。

Flexbox 的布局方式有很多种，这里只介绍其中一个：基于 flex-grow 和 flex-shrink 属性的自适应两列等高网格布局。

自适应两列等高网格布局

在这个布局中，我们需要将容器分成两列，并且让这两列的高度相等。首先，我们可以使用 Flexbox 的 flex-wrap 属性来让容器中的项目自动换行。然后，我们可以使用 flex-grow 和 flex-shrink 属性来控制项目的宽度。

具体来说，我们可以将容器的 display 属性设置为 flex，并将 flex-wrap 属性设置为 wrap。然后，我们可以将两列的项目的 flex-grow 属性都设置为 1，这样它们会平均地占据容器的宽度。此外，我们还可以将两列的项目的 flex-shrink 属性都设置为 1，这样它们会在容器宽度不足时自动缩小。

最后，我们还需要将两列的项目的高度设置为 100%，这样它们才能自适应容器的高度。

示例代码如下：

<div class="container">
  <div class="column"></div>
  <div class="column"></div>
</div>

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

.column {
  flex-grow: 1;
  flex-shrink: 1;
  height: 100%;
}

总结

CSS Flexbox 是一种非常强大的布局方式，可以轻松地实现各种复杂的布局效果。在实现等高的两列网格布局时，我们可以使用 flex-grow 和 flex-shrink 属性来控制项目的宽度，并将项目的高度设置为 100% 来实现自适应容器的高度。这种布局方式不仅简单易用，而且不需要任何 hack 或者 JavaScript，非常适合用于实现响应式布局。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/658a5b82eb4cecbf2df8da6e