這篇文章就跟大家介紹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>
</p><p></p>
<p></p>
<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>
</p><p>qqq</p>
<p>qqq</p>
<p>wwww</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>
</p><p>qqq</p>
<p>qqq</p>
<p>wwww</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>
</p><p>
</p><p></p>
<p></p>
<p></p>
<p>
</p><p></p>
<p></p>
<p></p>
<p>
</p><p></p>
<p></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>
</p><p>Header</p>
<p>
</p><p>Left</p>
<p>Center</p>
<p>Right</p>
<p>Footer</p>
#縮小瀏覽器視窗之後
總結：以上就是本篇的全部內容，更多相關教學請造訪 CSS基礎影片教學， CSS3影片教學，bootstrap影片教學！
以上是css3學習之flex實現幾種多列佈局的詳細內容。更多資訊請關注PHP中文網其他相關文章！
