如何入門CSS3的Flexbox布局

如何入門CSS3的Flexbox布局，相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

Flexbox布局概念

Flexbox布局（ Flexible Box 或CSS3 彈性布局），是CSS3中的一種新的布局模式，是可以自動調整子元素的高和寬，來很好的填充任何不同屏幕大小的顯示設備中的可用顯示空間，收縮內容防止內容溢出，確保元素擁有恰當的行為的布局方式。使用Flexbox來布局更容易，可以使用更少的代碼，更簡單的方式實現更復雜的布局，例如對齊方式，排列方向，排列順序（這也是Flexbox布局的核心能力所在），彈性盒中的子元素通過在各個方向放置就可以以彈性的尺寸適應父元素的顯示區域。由于子元素的顯示順序和它們在代碼中 的順序是獨立的，通過使用彈性盒，定位子元素變得更加簡單，復雜的布局也能夠使用更清晰的代碼更簡單的實現。獨立顯示被設定成只針對可見元素，而不是基于代碼的聲明和導航順序。

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

名詞與基礎

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

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

main axis（主軸）:Flex容器的主軸主要用來排列Flex元素。它不一定是水平，這主要取決于flex-direction屬性。
main-start（主軸起點邊） | main-end（主軸終點邊）:Flex元素的排列從容器的主軸起點邊開始，往主軸終點邊結束。
main size:Flex元素的在主軸方向的寬度或高度就是項目的主軸長度，Flex元素的主軸長度屬性是width或height屬性，由哪一個對著主軸方向決定。
cross axis（和主軸垂直交叉的軸）:與主軸垂直的軸稱作交叉軸。
cross-start（交叉軸起點邊） | cross-end（交叉軸終點邊）:伸縮行的排列從容器的交叉軸起點邊開始，往交叉軸終點邊結束。
cross size:Flex元素的在交叉軸方向的寬度或高度就是項目的交叉軸長度，Flex元素的交叉軸長度屬性是width或height屬性，由哪一個對著交叉軸方向決定。

例子

新的 flexbox 布局模式被用來重新定義CSS中的布局方式。很遺憾的是最近規范變動過多，導致各個瀏覽器對它的實現也有所不同。不過我仍舊想要分享一些例子，來讓你知道即將發生的改變。這些例子目前只能在支持 flexbox 的 Chrome 瀏覽器中運行，基于最新的標準。
使用flexbox你還可以做的更多；這里只是一些讓你了解概念的例子：

使用 Flexbox 的簡單布局

CSS Code復制內容到剪貼板

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復制內容到剪貼板

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. }  

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