使用display:flex布局,怎么使左边和右边盒子高度一致

使用flex布局可以实现左右两个盒子高度一致，具体实现方法如下：

HTML结构：

<div class="container">
  <div class="left-box">
    <!-- 左侧内容 -->
  </div>
  <div class="right-box">
    <!-- 右侧内容 -->
  </div>
</div>

CSS样式：

.container {
  display: flex;
}

.left-box, .right-box {
  flex: 1; /* 将左右两个盒子的宽度平分 */
}

.left-box {
  background-color: #f5f5f5;
}

.right-box {
  background-color: #d1d1d1;
  align-self: stretch; /* 让右侧盒子的高度与左侧盒子高度一致 */
}

解释一下以上代码的实现过程：

1. 将父容器设置为flex布局。

2. 左右两个盒子都设置为`flex: 1`，表示它们的宽度平分。

3. 左侧盒子（`.left-box`）设置背景色为`#f5f5f5`。

4. 右侧盒子（`.right-box`）设置背景色为`#d1d1d1`，并设置`align-self: stretch`，表示让右侧盒子的高度与左侧盒子高度一致。

这样就可以实现左右两个盒子高度一致的效果了。