flex制作的常用布局
两端宽度定值,中间自适应
< div class = " module" >
< div class = " module_l" >
< div>
left1
</ div>
< div>
left2
</ div>
</ div>
< div class = " module_c" >
center
</ div>
< div class = " module_r" >
right
</ div>
</ div>
<style lang="scss">
.module {
$wl : 100px;
$wr : 100px;
display : flex;
background-color : #fff;
margin-bottom : 20px;
padding : 20px;
&_l,
&_c,
&_r {
border : 1px solid #f00;
}
&_l {
width : $wl; flex-shrink : 0;
}
&_c {
flex-grow : 1;
}
&_r {
width : $wr; flex-shrink : 0;
}
}
</style>
左侧宽度定值,右侧自适应
< div class = " module" >
< div class = " module_l" >
< div>
left1
</ div>
< div>
left2
</ div>
</ div>
< div class = " module_r" >
right
</ div>
</ div>
<style lang="scss">
.module {
$wl : 100px;
display : flex;
background-color : #fff;
margin-bottom : 20px;
padding : 20px;
&_l,
&_r {
border : 1px solid #f00;
}
&_l {
width : $wl; flex-shrink : 0;
}
&_r {
flex-grow : 1;
}
}
</style>