近幾年，CSS領域出現了一些複雜的專用佈局工具，用以代替原有的諸如使用表格、浮動和絕對定位之類的各種變通方案。Flexbox，或者說是彈性盒子佈局模塊（Flexible Box Layout Module）是這些新佈局工具中的第一個我們會在本文給出一個易於理解的flexbox入門介紹。
隨着CSS網格佈局的引入，你可能會問flexbox佈局是否真的還有必要。雖然它們所能做的事情有一些重疊，但其各自在CSS佈局中有着非常特別的目的。一般來說，flexbox在一維場景（比如，一串類似的元素）下有最佳應用，而網格是二維場景下理想的佈局方案（例如整個頁面的元素）。
即便如此，flexbox仍可以用於整個頁面的佈局，這樣它能爲那些還不支持網格佈局的瀏覽器提供合適的兼容處理。
使用Flexbox的好處
flexbox的一些好處是：
頁面元素能被任意方向地放置（靠左、靠右、從上往下甚至從下往上）
佈局內容的可視順序能夠被反轉或重排
元素大小能“彈性”適應可用空間，並根據容器或者兄弟元素進行相應地對齊
能輕鬆實現等列寬佈局（與每一列裏面的內容無關）
爲了闡述其多樣的屬性和可能性，讓我們假設下面有這樣的佈局用例：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <div class="example"> <header> header content here </header> <main class="main"> <nav> nav content here </nav> <div class="content"> main content here </div> <aside> aside content here </aside> </main> <footer> footer content here </footer> </div>
首先，是把元素一起放進.main裏，比如，<nav>和<aside>。如果沒有flexbox，我們可能會把三個元素全部進行浮動，但想讓它按理想的方式工作顯得並不直觀。而且，按傳統的方式做這件事會出現一個衆所周知的問題：每一列僅僅和它的內容一樣高。因此，你可能需要把三個元素都設置爲統一的高度，或者使用某種黑科技。
讓flexbox來救場吧。
讓我們Flex
flexbox的要點是出現在display屬性上的flex值，它需要被設置在容器元素上。如此設置會讓它的子元素變成“彈性項目（flex item）”。這些彈性項目擁有一些易於使用的默認屬性。比如，它們被緊挨着放置，那些沒有特別指明寬度的元素自動佔滿了剩餘的空間。
因此，如果你給.main設置了display:flex，它的子元素.content就被自動擠在<nav>和<aside>之間。不需要再多餘的計算，多麼方便是吧？作爲附加獎賞，所有三個元素神奇地擁有了相同的高度。
1 2 3 | .main { display: flex; } |
項的順序：Flebox的order屬性
另外一個flexbox的能力，是能夠輕鬆改變元素的顯示順序。讓我們假設你爲一個客戶製作了上面的佈局，而她現在想要.content出現在<nav>之前。
通常，你需要深入到HTML源碼中去，在那裏改變元素的順序。而有了Flexbox，你可以完全使用CSS完成這項任務。只需把.content的order屬性設置爲-1，那麼這一列就會出現在前面，這本例就是最左邊。
1 2 3 4 5 6 7 | .main { display: flex; }
.content { order: -1; } |
如果你傾向於顯式地爲每一列指定order，你可以將.content的order設爲1，把<nav>的order設爲2，把<aside>的設爲3。
HTML源碼獨立於CSS的Flexbox樣式
但你的客戶並不滿足。她想讓<footer>成爲頁面的第一個元素，顯示在<header>之前。那好，同樣的，flexbox是你的朋友（雖然像在此例中，可能你得跟你的客戶好好談談，而不是跟隨指示）。因爲你不僅要重排列內部元素，還要重排外部的，display:flex規則將被設置在<div class=”example”>之上。注意這裏是如何在頁面中嵌套使用flex容器來達到你想要的效果的。
因爲<header>，<main class=”main”>和<footer>相互堆疊着，你需要首先設置一個垂直上下文，它能夠通過設置flex-direction:column來快速完成。還有，<footer>的order被設置爲-1，如此一來它就出現在頁面的最上頭。就這麼簡單。