2、flex基本布局
彈性盒布局的容器，使用"display: flex"宣告使用彈性盒布局
flex-direction用來確定主軸的方向
flex-wrap屬性的含義：是否佔一行
flex-flow"屬性把"flex-direction"和"flex-wrap"結合起來
3、容器中條目的順序：order屬性
4、條目尺寸的彈性："flex"可以同時宣告"flex-basis"、"flex-grow"和"flex-shrink"的值
"flex-basis"屬性：flex-basis屬性定義了在分配多餘空間之前，專案佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小，即 width 或 height 屬性的值。如果主軸尺寸屬性的值也是 auto，則使用的值由條目內容的尺寸來確定。
"flex-grow"屬性：值是乙個沒有單位的非負數，預設值是 1。"flex-grow"屬性的值表示的是當容器有多餘的空間時，這些空間在不同條目之間的分配比例。
比如，乙個容器中有 3 個條目，其"flex-grow"屬性的值分別為 1，2 和 3，那麼當容器中有空白空間時，這 3 個條目所獲得的額外空白空間分別佔全部空間的 1/6、1/3 和 1/2，如**清單 5所示。預覽的頁面見這裡。
"flex-shrink"屬性：在使用上類似於"flex-grow"。該屬性的值也是無單位的，表示的是當容器的空間不足時，各個條目的尺寸縮小的比例。在進行尺寸縮小時，條目的縮小比例與"flex-basis"的值相乘之後，就得到了應該縮小的尺寸的實際值。
例如，在容器中有 3 個條目，其"flex-shrink"屬性的值分別為 1，2 和 3。每個條目的主軸尺寸均為 200px。當容器的主軸尺寸不足 600px 時，比如變成了 540px 之後， 則需要縮小的尺寸 60px 由 3 個條目按照比例來分配。3 個條目分別要縮小 10px、20px 和 30px，主軸尺寸分別變為 190px、180px 和 170px。
5、條目對齊：
（1）第一種方式是使用自動空白邊，即"margin: auto"。在使用自動空白邊時，容器中額外的空白空間會被宣告為 auto 的空白邊佔據
（2）第二種方式是在主軸方向上的對齊。這是通過容器上的"justify-content"屬性來進行設定，可以調整條目在主軸方向上的對齊方式
（3）第三種方式是交叉軸方向上的對齊。除了在主軸方向上對齊之外，條目也可以在交叉軸方向上對齊。容器上的屬性"align-items"用來設定容器中所有條目在交叉軸上的預設對齊方向，而條目上的屬性"align-self"用來覆寫容器指定的對齊方式。
6、交叉軸空白處理
屬性「align-content」的可選值和含義，align-content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。
7、瀏覽器的支援
彈性盒布局
彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。彈性盒子由彈...
彈性盒布局
可以通過彈性盒指明空間的分布方式 內容的對齊方式和元素的視覺順序，使內容不再受原始碼順序的限制。但彈性盒布局只是視覺上的調整，並不會改變螢幕閱讀器對內容的讀取順序。它的最大特點就是，能讓元素適應不同的螢幕尺寸和不同的顯示裝置，讓內容隨可用空間的大小進行尺寸的增減，尤其適用於響應式 在元素上宣告dis...
彈性盒布局例項
今天給大家搞乙個彈性盒布局的例項，最近一直在複習一些基礎的東西，所以一直會跟大家分享一些基礎的東西 說實話，最近感覺被掏空了，別問我為什麼，誰去保健誰知道，哈哈，注意安全，好了步入正題，今天用彈性盒寫了乙個小例子，關於彈性盒的一些基礎我就不列舉了，大家有需要可以去 阮一峰大佬的 去看看 他已經寫的非...