移動端優先的flex三欄佈局的使用方法

felxbox佈局是css3裏新出的一個，它就是爲了解決上述兩種方式的不足出現的，是比較完美的一個。目前移動端的佈局也都是用flexbox。 這篇文章主要介紹了移動端優先的flex三欄佈局的使用方法，感興趣的小夥伴們能夠參考一下

默認狀況下先顯示移動端，經過 @media 屬性適配屏幕變化

使用flexbox相關的CSS屬性

1.  display: flex; (父元素)
2.  flex-wrap: nowrap | wrap | wrap-reverse; (父元素, 子元素超出該如何顯示)
3.  flex: flex-grow flex-shrink flex-basis; (子元素, 子元素該如何分配空間)
4.  order: number; (子元素, 子元素的順序該如何排列)

重點

1.  在父元素上設置 display: flex 和 flex-wrap: wrap
2.  經過 flex 來調整子元素上的空間分配(擴展、收縮比例和伸縮基準值)
3.  經過 order 來調整子元素的顯示順序(把 .center 放在中間)

例子

CSS

`.box {`
`display``: flex;`
`flex-wrap: wrap;`
`text-align``:` `center``;`
`}`
}//歡迎加入全棧開發交流划水交流圈：582735936
]//面向划水1-3年前端人員
}   //幫助突破划水瓶頸，提高思惟能力
`.``center` `{`
`background-color``:` `#f00``;`
`flex:` `100%` `1``;`
`}`
`.``left``, .``right` `{`
`flex:` `100%` `1``;`
`}`
`.``left` `{`
`background-color``:` `#0f0``;`
`}`
`.``right` `{`
`background-color``:` `#00f``;`
`}`
`@media` `all` `and (``min-width``:` `400px``) {`
`.``left``, .``right` `{`
`flex:` `50%` `1``;`
`}`
`}`
`@media` `all` `and (``min-width``:` `800px``) {`
`.box {`
`flex-wrap:` `nowrap``;`
`}`
`.``center` `{`
`order:` `2``;`
`flex:` `1``;`
`}`
`.``left``, .``right` `{`
`flex:` `0` `0` `300px``;`
`}`
}//歡迎加入全棧開發交流划水交流圈：582735936
]//面向划水1-3年前端人員
}   //幫助突破划水瓶頸，提高思惟能力
`.``left` `{`
`order:` `1``;`
`}`
`.``right` `{`
`order:` `3``;`
`}`
`}`
 |

HTML

`<``div` `class``=``"box"``>`
`<``div` `class``=``"center"``>`

彈性盒子是 CSS3 的一種新的佈局模式。

CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面須要適應不一樣的屏幕大小以及設備類型時確保元素擁有恰當的行爲的佈局方式。

引入彈性盒佈局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。

`</``div``>`
`<``div` `class``=``"left"``>left</``div``>`
`<``div` `class``=``"right"``>right</``div``>`
`</``div``>`

以上就是本文的所有內容，但願對你們的學習有所幫助，