css3 彈性盒子(flexible box 或 flexbox)，是一種
用於在頁面上布置元素的
布局模式
，使得當頁面布局必須適應不同的螢幕尺寸和不同的顯示裝置時，元素可**地執行。對於許多應用程式，
彈性盒子模型提供了對塊模型的改進，因為它不使用浮動，flex容器的邊緣也不會與其內容的邊緣摺疊。
許多設計師會發現彈性盒子模型更易於使用。彈性盒子中的子元素可以在各個方向上進行布局，並且能以彈性尺寸來適應顯示空間。由於元素的顯示順序可以與它們在源**中的順序無關，定位子元素將變得更容易，並且能夠用更簡單清晰的**來完成複雜的布局。這種無關性是僅限制於視覺呈現上的，語言順序以及基於源**順序的導航均不受影響
。彈性盒布局概念
在定義方面來說，彈性布局是指通過調整其內元素的寬高，從而在任何顯示裝置上實現對可用顯示空間最佳填充的能力。彈性容器擴充套件其內元素來填充可用空間，或將其收縮來避免溢位。
塊級布局更側重於垂直方向、行內布局更側重於水平方向，與此相對的，彈性盒子布局演算法是方向無關的。雖然塊級布局對於單獨乙個頁面來說是行之有效的，但其仍缺乏足夠的定義來支援那些必須隨使用者**(user agent)不同或裝置方向從水平轉為垂直等各種變化而變換方向、調整大小、拉伸、收縮的應用程式元件。 彈性盒子布局主要適用於應用程式的元件及小規模的布局，而（新興的）柵格布局則針對大規模的布局。這二者都是 css 工作組為在不同使用者**、不同書寫模式和其他靈活性要求下的網頁應用程式有更好的互操作性而做出的更廣泛的努力的一部分。
關於彈性盒子的討論已經從諸如水平/行內軸和垂直/塊級軸這些術語中解放出來，與此同時，需要有一套新的術語來正確描述此模型。在學習下面的詞彙專案時請對照下圖。圖中是乙個flex-direction屬性為row的彈性容器，意味著其內的彈性專案將根據既定書寫模式沿主軸水平排列，其方向為元素的文字流方向，在這個例子裡，為從左到右。
彈性容器(flex container)
包含著彈性專案的父元素。通過設定display屬性的值為flex或inline-flex來定義彈性容器。
彈性專案(flex item)
彈性容器的每個子元素都稱為彈性專案。彈性容器直接包含的文字將被包復成匿名彈性單元。
軸(axis)
每個彈性框布局包含兩個軸。彈性專案沿其依次排列的那根軸稱為主軸(main axis)。垂直於主軸的那根軸稱為側軸(cross axis)。
方向(direction)
彈性容器的主軸起點(main start)/主軸終點(main end)和側軸起點(cross start)/側軸終點(cross end)描述了彈性專案排布的起點與終點。它們具體取決於彈性容器的主軸與側軸中，由writing-mode確立的方向（從左到右、從右到左，等等）。
行(line)
根據flex-wrap屬性，彈性專案可以排布在單個行或者多個行中。此屬性控制側軸的方向和新行排列的方向。
尺寸(dimension)
根據彈性容器的主軸與側軸，彈性專案的寬和高中，對應主軸的稱為主軸尺寸(main size) ，對應側軸的稱為 側軸尺寸(cross size)。
為要使用此樣式的元素指派 css，需按以下方式設定 display 屬性：
display
: flex
display
: inline-flex
flex使彈性容器成為塊級元素。值inline-flex使彈性容器成為單個不可分的行內級元素。
彈性容器直接包含的文字將自動包覆成匿名彈性專案。不過，乙個只包含一系列空白符（如一堆空格或製表符等）的匿名彈性專案不會被渲染，就如同對其指派display: none。
對於彈性容器的絕對定位子元素來說，其靜態位置參照彈性容器的內容框的主起始角確定，而後依此完成此元素的定位。
相鄰的彈性元素其外邊距不會互相合併。使用auto外邊距可以吸收掉水平或垂直方向上的額外空間，這可以用於對齊或分隔相鄰的彈性專案。更多細節請參考 w3c 彈性框布局模型規範中的 aligning with 'auto' margins。
不像 css 中的其他對齊方法，彈性框的對齊屬性將進行「真正的」居中對齊。這意味著即使彈性條目溢位了彈性容器，它依然保持居中。不過這在某些時候可能會有問題。如果溢位超過了頁面的上邊緣或左邊緣（在從左到右的語言中，比如英語；在諸如阿拉伯語這樣從右到左的語言中這個問題更會出現在右邊緣），則雖然那些地方確實有內容，卻無法滾動到那些位置。在未來的發布版本裡，對齊屬性將會有所擴充套件，使其包含有「安全」選項。目前，如果操心這點，可以改用外邊距來達成居中效果，因為外邊距會用比較「安全」的方式來響應變化，出現溢位時將停止居中。對這種需要居中的彈性專案，不使用align-屬性，而使用自動外邊距就能解決這個問題。對彈性容器中第乙個和最後乙個彈性專案的外側邊緣應用，也可以使用自動外邊距來替代justify-屬性。自動外邊距會自動伸縮來佔滿剩餘空間，當有剩餘空間存在時彈性專案將會居中，如果沒有則切換至常規對齊方式。不過很不幸，如果嘗試在多行的彈性框中用基於外邊距的居中方法來替代justify-content，就必須對每一行的第乙個和最後乙個彈性專案應用外邊距。此時除非能夠事先**每一行都結束於哪個元素，否則就不能愉快的在主軸方向上用基於外邊距的居中方法來替代justify-content屬性了。
再強調一遍，元素的顯示順序與它們在源**中的順序無關，這種無關性只影響視覺呈現，語音順序以及基於源**順序的導航均不受影響。order屬性並不影響語音和導航的次序。因此開發者們必須小心，合理地安排元素在源**中的順序，以免破壞文件的可訪問性。
由於彈性盒子使用了不同的布局演算法，某些屬性用在彈性容器上沒有意義：
這個示例展示了如何對元素應用彈性布局，以及在彈性布局狀態下相鄰元素的行為方式。
lang
="en"
>
>
Flex Box 彈性布局
flex box 彈性布局 main axis main start main end main size cross axis cross start cross end cross size 6個容器的屬性 flex direction row 預設值 主軸為水平方向,起點在左端.row rev...
flexbox彈性盒子布局
1.混合劃分 flex 1 flex 1 flex 2 我只有100px 不定寬高，水平垂直居中 2.方法1 可實現螢幕的水平垂直居中 不定寬高的水平垂直居中hhhhhhhhhhhh 方法1方法2 似乎不可實現螢幕的水平垂直居中，只能實現某個容器內的水平垂直居中 容器最好是有寬高 相容性1，ios可...
學習彈性布局flexbox
學習基礎語法，可以根據demo裡面的 理解每乙個屬性和值。css3 彈性框 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當排布行為的布局方式。包含著彈性專案的父元素。通過設定display屬性的值為flex或inline flex來定義...