定義乙個flex box（伸縮盒布局），需要在乙個父級元素上使用display屬性的值：flex或inline-flex。這個父級元素將成為flex container（伸縮容器），而它的所有子元素將變成flex item（伸縮項）。有的地方叫做伸縮盒子，有的地方叫做彈性盒子，還有的叫做靈活性盒子。這些叫法都是說的名為flexbox的一種css3中的容器。作用是為了用來為盒模型提供最大的靈活性，不論是間隔方式，對齊方式等等都變得極為靈活，基本上可以實現任何你想要的布局方式。本文暫且將flexbox稱為彈性盒子。使用flex值能將元素渲染成為乙個塊級容器，而使用inline-flex值則是渲染成乙個行內伸縮容器。這些值會將元素格式化，產生flex formatting context（伸縮格式化上下文），這類似於塊的格式化上下文，而浮動不會干擾容器，且容器的margins（所有邊距）不會隨著這些專案被摺疊。
任何一種元素我們都可以為指定成為flex布局，塊級元素或者行級元素都可以。
.block-box
.inline-box
flex-wrap
nowrap（預設）：不換行。
wrap：換行，第一行在上方。
wrap-reverse：換行，第一行在下方。
flex-flow
justify-content
align-items
align-content
彈性盒子flexbox
彈性盒子，為父容器指定為彈性盒子，設定display flex，注意如果是webkit核心的，要加上字首 webkit，即是display webkit flex 如果是行內元素，設定為display inline flex 父容器擁有的屬性 1.flex direction 決定盒子的主軸方向，預...
彈性盒子（flex box）
flexbox在div下使用 1.display flex none block inline flex 設定為彈性盒子 2.flex wrap wrap nowrap 可折疊 3.flex direction 彈性盒子排列方向 row橫向排列 row reverse由右向左 column縱向向下，...
flexbox彈性盒子布局
1.混合劃分 flex 1 flex 1 flex 2 我只有100px 不定寬高，水平垂直居中 2.方法1 可實現螢幕的水平垂直居中 不定寬高的水平垂直居中hhhhhhhhhhhh 方法1方法2 似乎不可實現螢幕的水平垂直居中，只能實現某個容器內的水平垂直居中 容器最好是有寬高 相容性1，ios可...