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

这篇文章主要介绍了css3弹性盒子flex实现三栏布局的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

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

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

   三栏布局 

效果如图:

以上就是css3弹性盒子flex实现三栏布局的实现的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » CSS3 答疑