如何入門(mén)CSS3的Flexbox布局

如何入門(mén)CSS3的Flexbox布局，相信很多沒(méi)有經(jīng)驗(yàn)的人對(duì)此束手無(wú)策，為此本文總結(jié)了問(wèn)題出現(xiàn)的原因和解決方法，通過(guò)這篇文章希望你能解決這個(gè)問(wèn)題。

Flexbox布局概念

Flexbox布局（ Flexible Box 或CSS3 彈性布局），是CSS3中的一種新的布局模式，是可以自動(dòng)調(diào)整子元素的高和寬，來(lái)很好的填充任何不同屏幕大小的顯示設(shè)備中的可用顯示空間，收縮內(nèi)容防止內(nèi)容溢出，確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健Ｊ褂肍lexbox來(lái)布局更容易，可以使用更少的代碼，更簡(jiǎn)單的方式實(shí)現(xiàn)更復(fù)雜的布局，例如對(duì)齊方式，排列方向，排列順序（這也是Flexbox布局的核心能力所在），彈性盒中的子元素通過(guò)在各個(gè)方向放置就可以以彈性的尺寸適應(yīng)父元素的顯示區(qū)域。由于子元素的顯示順序和它們?cè)诖a中 的順序是獨(dú)立的，通過(guò)使用彈性盒，定位子元素變得更加簡(jiǎn)單，復(fù)雜的布局也能夠使用更清晰的代碼更簡(jiǎn)單的實(shí)現(xiàn)。獨(dú)立顯示被設(shè)定成只針對(duì)可見(jiàn)元素，而不是基于代碼的聲明和導(dǎo)航順序。

不同于塊級(jí)元素基于垂直方向布局以及行內(nèi)元素基于水平方向布局，彈性盒布局的算法是方向無(wú)關(guān)的。 雖然塊級(jí)元素布局在頁(yè)面中工作良好，但是其定義不足以支持那種需要根據(jù)用戶(hù)代理從豎直切換成水平等變化而進(jìn)行方向切換、大小調(diào)整、拉伸、收縮的引用組件。不同于將要出現(xiàn)的網(wǎng)格布局針對(duì)目標(biāo)為大比例布局，彈性盒布局更適用于應(yīng)用組件和小比例布局。這兩種都是CSS工作組為了能與不同用戶(hù)代理、不同書(shū)寫(xiě)模式和其他彈性需要進(jìn)行協(xié)作而做出的努力。

名詞與基礎(chǔ)

Flexbox是一個(gè)完整的布局模塊，不是單一的屬性，設(shè)計(jì)的屬性有很多。Flexbox布局主要由父容器和它的直接子元素組成，其中父容器被稱(chēng)之為flex container（flex容器），而其直接的子元素稱(chēng)作為flex item（flex元素）。

Flexbox布局按照寬和高涉及的基本概念名稱(chēng)有main axis(主軸)和cross axis(交叉軸，和主軸垂直)，主軸起點(diǎn)邊稱(chēng)為main start,主軸終點(diǎn)邊稱(chēng)為main end，交叉軸起點(diǎn)邊稱(chēng)為cross start,交叉軸終點(diǎn)邊稱(chēng)為cross end。如圖：

main axis（主軸）:Flex容器的主軸主要用來(lái)排列Flex元素。它不一定是水平，這主要取決于flex-direction屬性。
main-start（主軸起點(diǎn)邊） | main-end（主軸終點(diǎn)邊）:Flex元素的排列從容器的主軸起點(diǎn)邊開(kāi)始，往主軸終點(diǎn)邊結(jié)束。
main size:Flex元素的在主軸方向的寬度或高度就是項(xiàng)目的主軸長(zhǎng)度，F(xiàn)lex元素的主軸長(zhǎng)度屬性是width或height屬性，由哪一個(gè)對(duì)著主軸方向決定。
cross axis（和主軸垂直交叉的軸）:與主軸垂直的軸稱(chēng)作交叉軸。
cross-start（交叉軸起點(diǎn)邊） | cross-end（交叉軸終點(diǎn)邊）:伸縮行的排列從容器的交叉軸起點(diǎn)邊開(kāi)始，往交叉軸終點(diǎn)邊結(jié)束。
cross size:Flex元素的在交叉軸方向的寬度或高度就是項(xiàng)目的交叉軸長(zhǎng)度，F(xiàn)lex元素的交叉軸長(zhǎng)度屬性是width或height屬性，由哪一個(gè)對(duì)著交叉軸方向決定。

例子

新的 flexbox 布局模式被用來(lái)重新定義CSS中的布局方式。很遺憾的是最近規(guī)范變動(dòng)過(guò)多，導(dǎo)致各個(gè)瀏覽器對(duì)它的實(shí)現(xiàn)也有所不同。不過(guò)我仍舊想要分享一些例子，來(lái)讓你知道即將發(fā)生的改變。這些例子目前只能在支持 flexbox 的 Chrome 瀏覽器中運(yùn)行，基于最新的標(biāo)準(zhǔn)。
使用flexbox你還可以做的更多；這里只是一些讓你了解概念的例子：

使用 Flexbox 的簡(jiǎn)單布局

CSS Code復(fù)制內(nèi)容到剪貼板

1. .container {   

2.   display: -webkit-flex;   

3.   display: flex;   

4. }   

5. nav {   

6.   width: 200px;   

7. }   

8. .flex-column {   

9.   -webkit-flex: 1;   

10.           flex: 1;   

11. }  

使用 Flexbox 的牛逼布局

CSS Code復(fù)制內(nèi)容到剪貼板

1. .container {   

2.   display: -webkit-flex;   

3.   display: flex;   

4. }   

5. .initial {   

6.   -webkit-flex: initial;   

7.           flex: initial;   

8.   width: 200px;   

9.   min-width: 100px;   

10. }   

11. .none {   

12.   -webkit-flex: none;   

13.           flex: none;   

14.   width: 200px;   

15. }   

16. .flex1 {   

17.   -webkit-flex: 1;   

18.           flex: 1;   

19. }   

20. .flex2 {   

21.   -webkit-flex: 2;   

22.           flex: 2;   

23. }  

看完上述內(nèi)容，你們掌握如何入門(mén)CSS3的Flexbox布局的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！