css flex几种多列布局
发布时间：2018-10-19 15:55:55 作者：李钢铁 
我要评论
我要评论这篇文章主要介绍了css flex几种多列布局的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
基本的等分三列布局
.container{
display: flex;
width: 500px;
height: 200px;
}
.left{
flex:1;
background: red;
}
.middle{
flex:1;
background: green;
}
.right{
flex:1;
background: blue;
}
<div class="container">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
三列 左中定宽 右侧自适应
.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;
}
<div class="container">
<div class="left">qqq</div>
<div class="middle">qqq</div>
<div class="right">wwww</div>
</div>
缩小浏览器窗口后
左右固定，中间自适应
.container{
display: flex;
height: 300px;
}
.left{
width: 100px;
background-color: red;
}
.middle{
flex: 1;
background-color: green;
}
.right{
width: 100px;
background-color: blue;
}
<div class="container">
<div class="left">qqq</div>
<div class="middle">qqq</div>
<div class="right">wwww</div>
</div>
缩小浏览器窗口后
九宫格布局
.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;
}
<div class="container">
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
<div class="row">
<div class="left"></div>
<div class="middle"></div>
<div class="right"></div>
</div>
</div>
圣杯布局
*{
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;
}
<div class="container">
<div class="header">Header</div>
<div class="content">
<div class="content-left">Left</div>
<div class="content-middle">Center</div>
<div class="content-right">Right</div>
</div>
<div class="footer">Footer</div>
</div>
缩小浏览器窗口之后
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
flex布局又称为弹性布局，任何一个容器都可以指定为flex布局,这篇文章主要介绍了CSS中的flex布局,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参2020-03-19
本文给大家整理了CSS中display flex（布局利器） 的相关知识，本文通过实例截图的形式给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友参考下吧2020-02-05
这篇文章主要介绍了CSS3 Flex 弹性布局实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧2018-11-01
这篇文章主要介绍了详解CSS3伸缩布局盒模型Flex布局的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-20
这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-04-02
flex布局（flex是flexible box的缩写）， 也称为弹性盒模型 ，这篇文章主要介绍了CSS3新增布局之: flex的相关知识，本文通过实例代码给大家介绍的非常详细，对大家的学习或2020-06-18
最新评论