flex三列布局

背景

提起三列
布局大家应该都会想到：左右固定宽高，中间自适应的（比如说圣杯布局、双飞翼布局…）但其实有的时候在项目中我们往往会遇到另一类三列布局：中间固定宽高、左右自适应的三列布局页面。第一类三列布局的实现多种多样，但自从css3中出现了flex布局之后，通过flex布局的实现广受好评。

实现：

第一类的flex实现代码如下(左右固定宽高，中间自适应的)：

html结构：
<div class='wrap'>
<div class='left'></div>
<div class='center'></div>
<div class='right'></div>
</div>

css代码：
.wrap{
    
display:flex;
}
.left,.right{
    
 flex-grow: 1;
}
.center{
    
width:1200px;
}

第二类的flex实现代码如下(中间固定宽高、左右自适应的)：

html结构：
<div class='wrap'>
<div class='left'></div>
<div class='center'></div>
<div class='right'></div>
</div>

css代码：
.wrap{
    
display:flex;
}
.left,{
    
 order: -1;
    flex: 0 0 100px;
}
.right{
    
    flex: 0 0 100px;
}
.center{
    
 flex-grow: 1;

}

总结：

flex布局实现三列响应式的核心点其实就在于对想要具有响应式特性的div设置flex-grow：；