彈性盒子的效果：無非就是父級盒子裡面很多個小盒子進行彈性，有規則的排列分布
使用：在父級定義css屬性：display:flex 子元素可以定義寬高，也可以定義flex：1 分布比例：如何去分配父容器的空間
彈性盒子操作很多屬性，但是縱觀所有屬性，無非就是分為兩種，1.橫向，縱向
flex-direction:定義是在主軸對齊，還是側軸對齊
flex-wrap：定義子元素超出父容器的時候是否換行
justtify-content:其實就是操控父容器空餘的空間，來達到操作子元素的位置效果 (在主軸方向上)
align-content:其實就是操控父容器空餘的空間，來達到操作子元素的位置效果 (在測軸方向上)
align-items:此屬性是寫在父容器上面，就是設定父容器裡面的子元素在側軸上面的排列方式
align-self：此屬性是寫在子元素上面，就是單獨設定子元素在父容器上側軸方向上的對齊方式
order：數字 用整數來設定子元素的排列順序，數值小排列在前面。
使用：
display
: flex;
flex-direction
: row|row-reverse|column|column-reverse;
flex-wrap
: wrap|nowrap|wrap-reverse;
flex-flow
: flex-direction flex-wrap;
justify-content
: flex-start|flex-end|center|space-between|sapce-around;
align-items
: flex-start|flex-end|center|baseline|stretch|auto
(預設值)
;align-content
:flex-start|flex-end|center|space-between|space-around|stretch
(預設值)
;
order
: 值為數值，預設值0，按數字從小到大排列。
align-self
: flex-start|flex-end|center|baseline|stretch|auto
(預設值)
;flex
: 預設值為0 1 auto;
後面兩個值是可以省略的。所有預設值也可以說是
:0flex-grow
: 在父容器還有剩餘空間時，怎麼分配剩餘空間，預設值為0
flex-shrink：在父容器的大小不夠時，子元素縮小的比例，預設值為1
flex-basis
: 設定元素分配父容器的空間的大小，標籤原大小失效，
父容器剩餘空間夠的時候，標籤大小值跟flex-basis的值一樣
父容器剩餘空間不夠的時候，也會伸縮
預設為auto,就是標籤的大小
css3 彈性盒子
display webkit flex 定義元素為彈性盒子 屬性 direction 方向 flex direction row 預設值,子元素正向1 2 3 布局 flex direction row reverse 子元素正向3 2 1 布局 flex direction column 縱向布局...
Css3 彈性盒子
彈性盒子是 css3 的一種新的布局模式。css3 彈性盒 flexible box 或 flexbox 是一種當頁面需要適應不同的螢幕大小以及裝置型別時確保元素擁有恰當的行為的布局方式。引入彈性盒布局模型的目的是提供一種更加有效的方式來對乙個容器中的子元素進行排列 對齊和分配空白空間。彈性盒子由彈...
Css3彈性盒子
css3彈性盒子 fiexbox 1.彈性盒子 隨螢幕放大縮小盒子也放大縮小，不出現滾動條。對容器中的子元素進行排列 對齊和分配。2.彈性盒子 彈性容器 彈性子元素 注 彈性盒子在父元素寫，只定義子元素的布局。乙個彈性容器包含乙個或多個彈性子元素。預設情況每個容器只有一行，彈性子元素在彈性盒子內一行...