本文由 DTcms素材网 – DT素材网 发布，转载请注明出处，如有问题请联系我们！css3学习之flex实现几种多列布局
收藏 本篇文章就给大家介绍css3学习之flex实现几种多列布局的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
基本的等分三列布局
.container{ display: flex; width: 500px; height: 200px; } .left{ flex:1; background: red; } .middle{ flex:1; background: green; } .right{ flex:1; background: blue; } <p class="container"> <p class="left"></p> <p class="middle"></p> <p class="right"></p> </p>
三列 左中定宽 右侧自适应
.container{ display: flex; height: 300px; } .left{ flex: 0 0 100px; background-color: red; } .middle{ flex: 0 0 100px; background-color: green; } .right{ flex:1; background-color: blue; } <p class="container"> <p class="left">qqq</p> <p class="middle">qqq</p> <p class="right">wwww</p> </p>
缩小浏览器窗口后
## 左右固定，中间自适应 ##
.container{ display: flex; height: 300px; } .left{ width: 100px; background-color: red; } .middle{ flex: 1; background-color: green; } .right{ width: 100px; background-color: blue; } <p class="container"> <p class="left">qqq</p> <p class="middle">qqq</p> <p class="right">wwww</p> </p>
缩小浏览器窗口后
九宫格布局
.container{ display: flex; height: 300px; width: 300px; flex-direction: column; } .row{ display: flex; height: 100px; } .left{ flex: 1; height: 100px; border: 1px solid red; } .middle{ flex: 1; height: 100px; border: 1px solid green; } .right{ flex: 1; height: 100px; border: 1px solid blue; } <p class="container"> <p class="row"> <p class="left"></p> <p class="middle"></p> <p class="right"></p> </p> <p class="row"> <p class="left"></p> <p class="middle"></p> <p class="right"></p> </p> <p class="row"> <p class="left"></p> <p class="middle"></p> <p class="right"></p> </p> </p>
圣杯布局
*{ margin:0; padding:0; } .container{ display: flex; flex-direction: column; min-height: 100vh; justify-content: space-between; } .header{ background: red; flex: 0 0 100px; } .content{ display: flex; flex:1; } .content-left{ flex: 0 0 100px; background: green; } .content-right{ flex: 0 0 100px; background: pink; } .content-middle{ flex:1; } .footer{ background: yellow; flex: 0 0 100px; } <p class="container"> <p class="header">Header</p> <p class="content"> <p class="content-left">Left</p> <p class="content-middle">Center</p> <p class="content-right">Right</p> </p> <p class="footer">Footer</p> </p>
缩小浏览器窗口之后
总结：以上就是本篇的全部内容，更多相关教程请访问 CSS基础视频教程， CSS3视频教程，bootstrap视频教程！
更多 推荐文章
- 04-17中国首个东盟电子商务平台“美丽湾”启动
- 04-16电商下乡，京东、苏宁、阿里农村遭遇战打响？
- 04-16买房还是炒股，2015年买房无法拒绝的5大理由
- 04-161季度多家房企利润跌幅超50% 去库存促销战打响
