Flexbox 实现父容器内 DIV 横向排列且高度一致的方法

在网页布局中，经常会遇到需要将多个DIV元素在父容器内横向排列并且保持高度一致的需求。Flexbox（弹性盒子布局）为解决这个问题提供了一种简洁而强大的方法。

我们需要创建一个父容器，并为其设置display: flex;属性。这将把父容器定义为一个弹性容器，其子元素将按照弹性布局进行排列。例如：

.parent-container {
  display: flex;
}

默认情况下，子元素会在主轴（默认是水平方向）上从左到右排列。但此时，子元素的高度可能会不一致。为了让子元素高度一致，我们可以使用align-items属性。

将align-items属性设置为stretch，子元素将在交叉轴（垂直方向）上拉伸以填满父容器的高度，从而实现高度一致的效果。代码如下：

.parent-container {
  display: flex;
  align-items: stretch;
}

需要注意的是，子元素的高度会根据父容器的高度自动调整。如果父容器没有明确的高度设置，它会根据子元素的内容自适应高度。在某些情况下，可能需要为父容器设置一个固定的高度或者最小高度。

另外，如果子元素内部有内容，并且希望内容在垂直方向上居中显示，可以使用justify-content和align-items的组合。例如：

.child-element {
  display: flex;
  justify-content: center;
  align-items: center;
}

这样，子元素内部的内容就会在垂直和水平方向上都居中显示。

除了上述基本的设置，Flexbox还提供了许多其他属性，如flex-wrap用于控制子元素是否换行，flex-grow用于控制子元素在剩余空间中的分配比例等。通过合理使用这些属性，可以实现更加复杂和灵活的布局效果。

在实际应用中，使用Flexbox实现父容器内DIV横向排列且高度一致的方法可以大大简化网页布局的代码，提高开发效率。它也具有良好的浏览器兼容性，能够在大多数现代浏览器中正常工作。掌握这种布局方法，对于网页开发者来说是非常有价值的。