简介

所谓CSS的“水桶布局”，其实就是咱们开发中常见的等高布局，今天给大家提供一种可以实现等高布局的对应方法，大家先看案例。

案例效果

这种三列布局在开发过程中非常常见，但是多数情况下应该保证每一列的高度都是相同的，像上图一样明显是错误写法，所以我们需要使用CSS将其改为等高效果，如下图所示。

技术实现

技术点：弹性盒子布局flex，默认值就是自带等高布局的特点。
flex-direction 属性定义主轴的方向。默认值为row，一般是水平显示。flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。

align-item属性定义flex子项在flex容器的当前行的侧轴（纵轴 或者说 交叉轴）方向上的对齐方式。默认值为 stretch，元素被拉伸以适应容器。

结构如下：

<div class="box">

  <div class="left"></div>

  <div class="center"></div>

  <div class="right"></div>

</div>

样式如下：

.box {

  display: flex;

}

.left {

  width: 300px;

  background-color: grey;

}

.center {

  flex: 1;

  background: red;

}

.right {

  width: 500px;

  background: yellow;

}