实现“等高两栏”, 为什么不能用align-items: cen

89dfb654-b82d-45ca-8bfe-ee1caa27e382.png

// 大容器
.bd {
  display: flex;
  align-items: center;
}
// 左容器
.bd .left {
  width: 200px;
  background: orange;
}
// 右容器
.bd .right {
  width: 200px;
  height: 500px
  background: red;
}

如图所示, 为什么 left 的橘黄色 div 出不来? 通过浏览器布局检测发现 left 的高度为 0

如何使 .left 和 .right 一样高，实现“等高两栏”。

• 用 align-items: stretch（默认）时，.left 会被拉伸到和 .bd 一样高（即和 .right 一样高）。
  *若使用 align-items: center 时，.left 只会有内容高度，不会被拉伸 ,不会自动等高，而且会在父容器中垂直居中。

错误用法:

.bd {
  display: flex;
  align-items: center;
}
// 左容器
.bd .left {
  width: 200px;
  background: orange;
}
// 右容器
.bd .right {
  width: 200px;
  height: 500px
  background: red;
}
这时 .left 的高度只等于内容高度（如果没内容就是 0），不会和 .right 一样高

正确用法:

bd {
  display: flex;
 /* align-items: stretch; 默认值 */
}
.bd .left {
  width: 200px;
  background: orange;
}
.bd .right {
  width: 200px;
  height: 500px
  background: red;
}