<b>flexbox布局概念</b>
flexbox布局（ flexible box 或css3 彈性布局），是css3中的一種新的布局模式，是可以自動調整子元素的高和寬，來很好的填充任何不同螢幕大小的顯示裝置中的可用顯示空間，收縮内容防止内容溢出，確定元素擁有恰當的行為的布局方式。使用flexbox來布局更容易，可以使用更少的代碼，更簡單的方式實作更複雜的布局，例如對齊方式，排列方向，排列順序（這也是flexbox布局的核心能力所在），彈性盒中的子元素通過在各個方向放置就可以以彈性的尺寸适應父元素的顯示區域。由于子元素的顯示順序和它們在代碼中 的順序是獨立的，通過使用彈性盒，定位子元素變得更加簡單，複雜的布局也能夠使用更清晰的代碼更簡單的實作。獨立顯示被設定成隻針對可見元素，而不是基于代碼的聲明和導航順序。
不同于塊級元素基于垂直方向布局以及行内元素基于水準方向布局，彈性盒布局的算法是方向無關的。 雖然塊級元素布局在頁面中工作良好，但是其定義不足以支援那種需要根據使用者代理從豎直切換成水準等變化而進行方向切換、大小調整、拉伸、收縮的引用元件。不同于将要出現的網格布局針對目标為大比例布局，彈性盒布局更适用于應用元件和小比例布局。這兩種都是css工作組為了能與不同使用者代理、不同書寫模式和其他彈性需要進行協作而做出的努力。
<b>基本概念</b>
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 布局系統一同工作，但是在開始使用新的系統之前，丢掉以前在 web 布局中的假設和實踐很重要。這是一種全新的工作方式，如果堅持以前的思維，你将受到阻礙。
你可能偶爾聽到“flexbox 是用來幹啥幹啥的”。誠然，其它的布局系統會很快的補充上 flexbox——比如 grids 和 regions，但這種稱述并不完全準确。css 不是語義化的，沒有哪一個 css 特性就是固定做某件事情的。你可以使用任意的 css 來完成你的需求；唯一的問題是什麼樣的代碼才能更高效的實作目标。正如我們看到的，flexbox 解決了設計者在布局上正面臨的諸多問題。
flexbox 以前的幾個版本給現在的開發者們帶來了一些風險：很可能讀到一篇沒有指明書寫時間的文章，最後發現自己正在看 2009 年的 flexbox 規範說明（現在已經廢除）。是以，時刻謹慎小心，提高警惕。
來看一個實際例子：
首先舉一個栗子，之前我們是這樣實作一個div盒子水準垂直居中的。在知道對象高寬的情況下，對居中元素絕對百分比定位，然後通過margin偏移的方式來實作。
.container{
width: 600px;
height: 400px;
border: 1px solid #000;
position: relative;
}
.box{
width: 200px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top:-50px;
假如使用了flex後，實作起來就簡單了，而且不需要自己去算，也不需要絕對定位，隻需要通過對伸縮容器定義兩個屬性，justify-content定義伸縮項目沿着主軸線的對齊方式為center， align-items定義伸縮項目在側軸（垂直于主軸）的對齊方式為center。
display: flex;
justify-content:center;
align-items:center;
width: 200px; //寬度可以為任意
height: 100px; //高度可以為任意
其實flex的優點并不止這些，我們來看一張圖 。
這裡的具體元素等以後可以慢慢道來。