可以通過彈性盒指明空間的分布方式、內容的對齊方式和元素的視覺順序，使內容不再受原始碼順序的限制。但彈性盒布局只是視覺上的調整，並不會改變螢幕閱讀器對內容的讀取順序。它的最大特點就是，能讓元素適應不同的螢幕尺寸和不同的顯示裝置，讓內容隨可用空間的大小進行尺寸的增減，尤其適用於響應式**。
在元素上宣告display：flex或display：inline-flex便可以啟用彈性盒布局，這個元素便成為彈性容器，其子元素成為彈性元素。
display:flex生成的是塊級框，若沒有設定寬高則預設佔滿一行；
display:inline-flex生成的是行內塊級框，其寬高會根據裡面的彈性元素進行調整；
如下圖所示：
flex-direction屬性：（ row[預設]|row-reverse|column|column-reverse）設定彈性容器主軸的方向；
flex-wrap屬性：（nowrap[預設]|wrap|wrap-reverse）當彈性容器主軸放不下時，決定元素是否換行以及換行的方向，實際上影響垂軸方向；
上述兩個屬性可以合併為
flex-flow屬性：（row nowrap[初始值]）
justify-content屬性：設定彈性容器內所有元素在主軸上如何分布；
align-item屬性：設定彈性容器內所有元素在垂軸上的對齊方式；
align-self屬性：設定單個元素在垂軸上的對齊方式；
align-content屬性：當彈性容器允許換行導致有多個彈性元素行時，該屬性設定各個彈性元素行的對齊方式；若不允許換行，則用來指明元素從哪個方向溢位；
彈性盒布局
2 flex基本布局 彈性盒布局的容器，使用 display flex 宣告使用彈性盒布局 flex direction用來確定主軸的方向 flex wrap屬性的含義 是否佔一行 flex flow 屬性把 flex direction 和 flex wrap 結合起來 3 容器中條目的順序 or...
彈性盒布局
彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。彈性盒子由彈...
彈性盒布局例項
今天給大家搞乙個彈性盒布局的例項，最近一直在複習一些基礎的東西，所以一直會跟大家分享一些基礎的東西 說實話，最近感覺被掏空了，別問我為什麼，誰去保健誰知道，哈哈，注意安全，好了步入正題，今天用彈性盒寫了乙個小例子，關於彈性盒的一些基礎我就不列舉了，大家有需要可以去 阮一峰大佬的 去看看 他已經寫的非...