現在CSS浮動清楚定義了現在的網頁佈局，基於幾個世紀以來的印刷理論，儘管他們運用起來很合適，嚴格來說，浮動並非是那個目的。就像表單佈局一樣，在90年代並沒有阻止我們的前進。
然而，網頁佈局的未來確實是清晰明亮的，這要歸功於彈性盒子。CSS佈局機制是讓我們安排元素在一個真正的網格空間。一些元素被固定，其他的可以滾動。他們的順序可以獨立於他們原來的順序。所有的這些元素都可以適配一系列螢幕，從寬屏到智慧手機，甚至是一些還沒有想到的裝置，瀏覽器支援也非常棒。所以這是一個很好的加入彈性盒子佈局方式的時機，如果你還沒有嘗試過的話。
但是改變我們的方式並不是那麼容易的。彈性盒子有著令人眼花繚亂的特性，這些特性很少有相似的，引入他需要花點時間。幸運的是，為了達到這個佈局目的，你只需要瞭解很少的理論知識。讓我們看下我們如何建立一個類似於Gmail的網站，基於彈性盒子佈局原理的介面。假如你們有探索或者深入理解彈性盒子佈局這種理論，這篇文章將會再次解釋那些曾經困惑你的地方。
彈性盒子理念
彈性盒子理論需要一個全新的思考方式。代替從左到右，從上到下的行與列的排列布局，我們在一條線上安排元素——實際上，是兩條線，一個主軸線和一個交叉軸線，但今天我們要用的是第一個主軸線。考慮到主軸線沿著盒子（div或者其他html元素）排列，這個類似於繩子的無形軸線，從容器的一端延伸到另一端。這引出四個很有趣的概念。
對齊
首先，我們可以沿著繩子分割這個盒子，使元素到一端，這樣集中分佈它們。那意味著元素可以緊鄰螢幕的左邊或者右邊，無論螢幕有多寬。甚至這樣分配可以滿足任何尺寸的螢幕，這是最完美的在我們的多螢幕世界中。
彈性盒子允許設計師將HTML的元素推向繩子的任何一端
方向
其次，我們也可以翻轉這個繩子，因此盒子向反方向翻轉而不用去編輯HTML。這和排序技術很相似，允許我們翻轉排列——除了第三個特徵進一步來區分它們的不同。
元素的順序和位置都可能被翻轉
定位
第三，可以通過90度轉動繩子從容器的頂部吊著，而不是從一邊執行到另一邊。
全部排列可以旋轉90度，懸掛在容器的頂部
次序
最終，我們可以控制盒子的次序，沿著繩子哪一個排第一、第二、第三等等，而不用去編輯HTML。這是很厲害的，意味著我們可以控制HTML的文件結構。想讓元素垂直居中排布？沒有問題。想在你的HTML結束但在你開始佈局時導航？當然可以。想嘗試一下不同的佈局？全部需要用到CSS理論。就像這樣，我們已經開始考慮就文件內容和裝置，而不是固化的柵格。
HTML元素的順序可以通過CSS屬性來改變，而不需要去改變HTML結構本身
有很多知識，但是這裡只講一些基礎的理論：
1. 塊級元素緊緊的沿著一條不可見線
2. 我們可以沿著那條線推動元素
3. 我們可以翻轉繩子，這樣就可以翻轉盒子的順序。
4. 我們可以沿著繩子按任何方式來改變盒子的順序，而不用考慮改變HTML。
順序
順序是一個很重要的概念在彈性盒子理論中。讓我們舉一個簡單的HTML文件:一個傳統的部落格一般包含這幾點資訊。
- 頭部
網站的標題，描述，查詢表單（這些框架告訴人們網站資訊，已確保讓他們知道自己在那裡）
- 變換屬性
作者，日期，主題（這些資訊可以幫助人們瞭解這是否是他們所需要的）
- 主要內容
網頁的主要內容是什麼
- 提供服務的內容
一些相關的資訊
- 導航
可以指引你到達網站的各個網頁
- 尾部
版權資訊，訂閱資訊，社交媒體，資訊登記
為了可以被搜尋引擎檢索和使用者瀏覽，這些元素被按順序排列。現在，我們把這個繩子從移動裝置的頂部懸掛下來，記錄他們，並且把主要內容放在首位。
1. 主要內容
2. 變換屬性
3. 補充內容
4. 頭部
5. 導航
6. 尾部
然而，在電腦桌面端又有不同的瀏覽順序
1. 頭部
2. 變換屬性
3. 主要內容
4. 補充內容
5. 導航
6. 尾部
等一下，那不是正確的順序。我們希望導航在頂部，彈性盒子可以很輕鬆的做到這一點。這條繩子也可以放進彈性盒子內部，並且所有的規則同樣適用。
巢狀繩子和盒子
每一個彈性盒子佈局都可以在容納另外的盒子按照他們各自的繩子排列，這條繩子可以從左到右排列反之亦然，也可以從上到下反之亦然，也可以把盒子推向另一邊，居中來分佈。因為彈性盒子的靈活性開啟了各種可能性，他也意味著我們需要仔細的考慮我們的佈局。
盒子沿著彈性繩子排列的時候，也可能包含著其他彈性盒子
我們從一些內容舉例開始，看下它為何變得複雜了。這不是按照佈局的順序（你所看到的順序）假想一下你給一個觀眾一個描述，你告訴他們你將說什麼，然後你說了，然後你在總結下你剛說的內容。我們假設的頁面也是按照相似的結構。
- 頭部
- 當前資訊
- 資訊列表
- 盒子內部的一些連結
- 尾部
描述一個設計
為了使事情簡單一些，我們會在一個相似的佈局上開始工作。
一個典型的郵箱APP排版佈局
這裡有兩個彈性盒子佈局，第一個有三個盒子從上到下。第二個佈局是在中間的盒子，從右到做排列。
頭部、尾部的寬度和視口寬度一樣。導航欄適配在左邊，當主要內容資訊不能被完全容納後，區域允許出現滾動條。為了達到這個目的，需要設定一些浮動和絕對定位，但是彈性盒子給了我們更多的選擇，接下來我們一起看下。
設定文件
外部的容器只有三個部分，包裹在一個彈性容器元素內：
我們用語義表達方式把它稱之為彈性盒子，至少我們的CSS會更通順。
在盒子內部，我們需要三個層級塊：
這個例子用這個段落作為一個獨立的整體，而不是文章中的段落。
宣告這些元素為彈性盒子
我們需要告訴瀏覽器這些元素是彈性佈局，可以伸縮的。
注意到這個可以使彈性盒子應用在主要的容器上，而不是內容本身。
增加一些維度
根據原型設計圖，我們瞭解到確定的元素需要有自身的長度和寬度。網站的頭部和尾部相對於主題內容來說要短一點，相對於左邊很窄的導航工具欄。文章的內容區域佔據了剩下的空間區域。為了保持靈活的佈局而不考慮螢幕尺寸（這篇教程所宣告的），這些區域不會設定固定的寬度。
這裡，我們將 flex-basis比喻為寬度，只要主軸是水平的，如果我們將繩子從上到下掛起來，那麼 flex-basis 將自動變為高度！
使主要部分可滑動
這個是很容易的。只需要設定新增 overflow:scroll。對於主要的元素避免他被頭部和尾部所覆蓋。小提示：嘗試overflow:auto 隱藏滾動條（當他們不是必須的時候）在大多數瀏覽器中。
測試內容
在這一點上，頭部的表單浮動，需要設定一點邊距，即使當瀏覽器被重置。主要部分應當很完美的浮動不管在任何尺寸的瀏覽器中。假如瀏覽器不能友好的支援彈性盒子，那麼這個頁面將變為主要內容優先的佈局方式。
知道哪些瀏覽器不支援彈性盒子是很重要的。每個最新的版本基本上都支援，但是，有個問題是使用者何時更新他們的軟體。那麼哪些版本開始這些瀏覽器支援彈性盒子呢？
- 谷歌31以及以後
- 火狐31以及以後
- IE瀏覽器10及以後
- 電腦版Safari 7及以後
- iOS版 7.1及以後
- 安卓4.4及以後
- 谷歌安卓版42及以後
- 歐朋27及以後
那麼老的瀏覽器怎麼辦呢？解決方案大相徑庭，取決於你正在努力達到的佈局,儘管我們可以推出一些技巧。
最安全的方式讓彈性盒子完美的支援瀏覽器，是按照順序把CSS寫在他將出現的地方。按照語義化的思考方式開始，老版本瀏覽器將忽視彈性盒子的屬性資訊，感謝的是，好的條件註釋將允許我們應用浮動和清除佈局。老版本的瀏覽器往往可以給你更清晰的邏輯順序，因此彈性盒子和浮動將並存。智慧的瀏覽器將會應用彈性盒子佈局，儘管邏輯上瀏覽器應當忽視它們。最後，假如你想試驗下，那麼嘗試Flexie,一個基於JavaScript的polyfill的老版本瀏覽器工具。