Css3響應佈局 彈性盒子
阿新 • • 發佈：2019-02-06
彈性盒子（flexbox）
組成：彈性容器（Flex container）和彈性子元素（Flex item）
<1>彈性容器（Flex container）：
display:flex|inline-flex;
內部包含一個或多個彈性子元素
注意：設定為彈性容器後，子元素的float/clear/vertical-align屬性將失效
屬性 1.flex-direction :用來指定子元素的主軸方向
屬性值：row | row-reverse | column | column-reverse;
預設值為：row 設定主軸的方向--row為水平方向作為主軸*
flex-direction:row;
設定主軸的方向--column為垂直方向作為主軸
flex-direction:column;*
指定子元素是否換行
屬性值：nowrap | wrap | wrap-reverse
預設為：nowrap
3.flex-flow 以上兩個屬性的縮寫 4.justify-content
用於指定主軸上對齊伸縮專案方式
屬性值：flex-start | flex-end | center | space-between | space-around
5.align-items
用於指定側軸上對齊伸縮專案方式
屬性值：flex-start | flex-end | center | baseline | stretch
stretch為拉伸，當子元素高度為auto時，所有子元素會拉伸為同行最大高度。
設定側軸上多根軸線的對齊方式
屬性值：flex-start | flex-end | center | space-between | space-around | stretch
<2>彈性子元素（Flex item）
屬性： 1.order
專案流排列順序
屬性值：數值（數值越小排在越前面）
2.flex-grow
專案擴大比例，子元素將完全佔用容器可用空間
屬性值：數值，取負值無效
3.flex-shrink
專案縮小比例，空間不足時，子元素將等比縮小
屬性值：數值，取負值無效
4.flex-basis
設定子元素佔據主軸的空間
分配容器空間
5.flex
flex-grow，flex-shrink和flex-basis三個屬性的縮寫
第二個和第三個屬性值可選
6.align-self
覆蓋預設的對齊方式
屬性值：auto | flex-start | flex-end | center | baseline | stretch
display:flex|inline-flex;
內部包含一個或多個彈性子元素
注意：設定為彈性容器後，子元素的float/clear/vertical-align屬性將失效
屬性 1.flex-direction :用來指定子元素的主軸方向
屬性值：row | row-reverse | column | column-reverse;
預設值為：row 設定主軸的方向--row為水平方向作為主軸*
flex-direction:row;
設定主軸的方向--column為垂直方向作為主軸
flex-direction:column;*
指定子元素是否換行
屬性值：nowrap | wrap | wrap-reverse
預設為：nowrap
3.flex-flow 以上兩個屬性的縮寫 4.justify-content
用於指定主軸上對齊伸縮專案方式
屬性值：flex-start | flex-end | center | space-between | space-around
5.align-items
用於指定側軸上對齊伸縮專案方式
屬性值：flex-start | flex-end | center | baseline | stretch
stretch為拉伸，當子元素高度為auto時，所有子元素會拉伸為同行最大高度。
設定側軸上多根軸線的對齊方式
屬性值：flex-start | flex-end | center | space-between | space-around | stretch
<2>彈性子元素（Flex item）
屬性： 1.order
專案流排列順序
屬性值：數值（數值越小排在越前面）
2.flex-grow
專案擴大比例，子元素將完全佔用容器可用空間
屬性值：數值，取負值無效
3.flex-shrink
專案縮小比例，空間不足時，子元素將等比縮小
屬性值：數值，取負值無效
4.flex-basis
設定子元素佔據主軸的空間
分配容器空間
5.flex
flex-grow，flex-shrink和flex-basis三個屬性的縮寫
第二個和第三個屬性值可選
6.align-self
覆蓋預設的對齊方式
屬性值：auto | flex-start | flex-end | center | baseline | stretch