css3弹性盒子flex实现三栏布局

如题:高度已知,左右栏宽度300px,中间自适应:

弹性盒子本身就是并排的,我们设置宽度即可。

用一个容器container包裹三栏,设置comtainer容器的display属性为flex,左右栏设置宽度为300px,中间栏设置flex:1,这里的1表示宽度比例,具体数值取决于其它盒子的flex值,由于这里其它盒子宽度固定,所以中间栏会自动填充:




   
    三栏布局





   

   

   



效果如图:


你可能感兴趣的:(CSS)