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>
缩小浏览器窗口之后
感谢各位的阅读！看完上述内容，你们对css3中flex实现几种多列布局的案例大概了解了吗？希望文章内容对大家有所帮助。如果想了解更多相关文章内容，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
