CSS Flex 布局怎样实现子DIV横向排列且高度自动调整

在网页布局中，经常会遇到需要将子元素横向排列并且让它们的高度能够根据内容自动调整的需求。CSS Flex布局为我们提供了一种简洁而强大的方式来实现这一效果。

我们需要创建一个父容器和若干子DIV元素。在CSS中，将父容器的display属性设置为flex，这就启用了Flex布局。例如：

.parent {
  display: flex;
}

这样，子DIV元素就会默认按照主轴（默认是水平方向）进行排列，实现了横向排列的初步效果。

然而，仅仅这样设置，子元素的高度可能并不会根据内容自动调整。为了实现高度的自动调整，我们还需要进一步设置。

一个关键的属性是align-items。它用于设置子元素在交叉轴（垂直方向）上的对齐方式。如果将其设置为stretch，子元素会在交叉轴方向上拉伸以填满父容器的高度。示例代码如下：

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

这样，即使子元素的内容高度不同，它们也会自动调整高度，使其在垂直方向上填满父容器。

另外，如果希望子元素能够根据自身内容自适应高度，而不是强制拉伸，可以不设置align-items为stretch，子元素就会按照自身内容的高度显示。

还可以结合其他Flex布局的属性来进一步优化布局。比如，justify-content属性可以控制子元素在主轴上的对齐方式，有flex-start、center、flex-end等多种取值，能满足不同的布局需求。

在实际应用中，CSS Flex布局的这种特性非常实用。比如在创建导航栏、卡片式布局等场景中，我们可以轻松地让子元素横向排列并根据内容自动调整高度，无需使用复杂的定位或浮动来实现。

通过合理运用CSS Flex布局的相关属性，我们能够高效地实现子DIV横向排列且高度自动调整的效果，为网页布局带来更多的灵活性和便捷性。