彈性盒子是 css3 的一種新的布局模式。
css3 彈性盒（ flexible box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。
引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列、對齊和分配空白空間。
彈性盒子由彈性容器(flex container)和彈性子元素(flex item)組成。
彈性容器通過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了乙個或多個彈性子元素。
注意：彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內布局。
彈性子元素通常在彈性盒子內一行顯示。預設情況每個容器只有一行。
以下元素展示了彈性子元素在一行內顯示，從左到右:
flex-direction屬性指定了彈性子元素在父容器中的位置。
flex-direction: row | row-reverse | column | column-reverse
flex-direction的值有:
內容對齊（justify-content）屬性應用在彈性容器上，把彈性項沿著彈性容器的主軸線（main axis）對齊。
justify-content 語法如下：
justify-content: flex-start | flex-end | center | space-between | space-around各個值解析:
彈性盒布局
2 flex基本布局 彈性盒布局的容器，使用 display flex 宣告使用彈性盒布局 flex direction用來確定主軸的方向 flex wrap屬性的含義 是否佔一行 flex flow 屬性把 flex direction 和 flex wrap 結合起來 3 容器中條目的順序 or...
彈性盒布局
可以通過彈性盒指明空間的分布方式 內容的對齊方式和元素的視覺順序，使內容不再受原始碼順序的限制。但彈性盒布局只是視覺上的調整，並不會改變螢幕閱讀器對內容的讀取順序。它的最大特點就是，能讓元素適應不同的螢幕尺寸和不同的顯示裝置，讓內容隨可用空間的大小進行尺寸的增減，尤其適用於響應式 在元素上宣告dis...
彈性盒布局例項
今天給大家搞乙個彈性盒布局的例項，最近一直在複習一些基礎的東西，所以一直會跟大家分享一些基礎的東西 說實話，最近感覺被掏空了，別問我為什麼，誰去保健誰知道，哈哈，注意安全，好了步入正題，今天用彈性盒寫了乙個小例子，關於彈性盒的一些基礎我就不列舉了，大家有需要可以去 阮一峰大佬的 去看看 他已經寫的非...