Flex左右布局，高度相等自适应

Flex布局是一种现代的CSS布局技术，它提供了一种灵活的方式来定义网页中的元素位置和大小。其中，左右布局就是利用Flex布局的“flex-direction”属性来实现的。

具体实现方法如下：

1.在父元素上设置display:flex来启用Flex布局；

2.设置flex-direction属性为row（水平排列）或row-reverse（反向水平排列），以实现左右布局；

3.将子元素固定宽度或使用flex属性来按比例分配剩余宽度；

4.设置align-items为stretch，使子元素填充垂直方向的可用高度，实现高度相等的效果。

实现示例代码如下：

HTML代码：

<div class="flex-container">
  <div class="item item1">左侧内容</div>
  <div class="item item2">右侧内容</div>
</div>

strech是重点

.flex-container {
  display: flex;
  flex-direction: row;
  align-items: stretch;//
}

.item {
  flex: 1;
  padding: 10px;
}

.item1 {
  background-color: #f6f6f6;
}

以上代码实现了左右布局，并且左右两个子元素的高度自适应，相等。其中，父容器的align-items属性设置为stretch，启用了由Flex布局提供的高度填充功能。子元素的flex属性设置为1，自动按比例分配剩余宽度，保证左右两列等分容器的总宽度。最后，通过给子元素设置背景颜色，使得布局效果更加明显。