40个css布局技巧（教你用CSS实现水桶布局）
40个css布局技巧（教你用CSS实现水桶布局）结构如下： <div class="box"> <div class="left"></div> <div class="center"></div> <div class="right"></div> </div>样式如下：
简介所谓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;
}
