Flex three column layout

background

Lift three columns
Everyone should think of the layout ： Left and right fixed width and height , Adaptive in the middle （ For example, the Grail layout 、 Double wing layout …） But in fact, sometimes in projects, we often encounter another kind of three column layout ： Fixed width and height in the middle 、 Left right adaptive Three column layout page . The implementation of the first type of three column layout is diverse , But since css3 In the flex After the layout , adopt flex The realization of the layout is widely praised .

Realization ：

The first kind of flex The implementation code is as follows ( Left and right fixed width and height , Adaptive in the middle )：

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

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

The second kind of flex The implementation code is as follows ( Fixed width and height in the middle 、 Left right adaptive )：

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

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

}

summary ：

flex The core point of realizing three column responsiveness in layout is to respond to those who want to have responsive characteristics div Set up flex-grow：;