FlexBox彈性盒子詳解
flex-direction(伸縮容器的屬性) ——改變主軸的方向
row(default)
row-reverse
column
column-reverse
flex-wrap(伸縮容器的屬性) ——改變側軸的方向
nowrap(default) 不換行
Wrap 根據尺寸換行
wrap-reverse
flex-direction和flex-wrap的縮寫方式
flex-flow: flex-direction || flex-wrap
例flex-flow:row nowrap;
order(伸縮項的屬性) ——改變伸縮項的位置
order:<integer> (默認爲0,數值越大越靠後)
justify-content(伸縮容器的屬性) ——控制伸縮項在主軸的展現方式
flex-start(default)
flex-end
center
space-between
space-around
align-items(伸縮容器的屬性) ——控制伸縮項在側軸的展現方式
stretch(default) stretch 時要去掉div的height
flex-start
flex-end
baseline
align-self(伸縮項的屬性) ——控制指定伸縮項在側軸的展現方式
stretch(default)
flex-start
flex-end
baseline
align-content(伸縮容器的屬性) ——控制伸縮項所組成的行(列)在側軸的展現方式
stretch(default)
flex-start
flex-end
center
space-between
space-around
*該屬性在伸縮行(列)只有一行(列)的時候不生效
flex-grow(伸縮項的屬性) ——控制伸縮項在伸縮行的伸展程度
flex-grow:<integer>
flex-shrink(伸縮項的屬性) ——控制伸縮項在伸縮行的收縮程度
flex-shrink:<integer>
flex-basis(伸縮項的屬性) ——定義伸縮項伸縮前的尺寸
flex-basis:auto|<length> (影響屬性:width,flex-wrap:wrap;)
*設置了grow或shink的伸縮項將以這個尺寸爲基準進行伸縮
flex(伸縮項)
flex-grow,shrink,basis的縮寫形式
none|[<flex-grow> <flex-shrink> || <flex-basis>]
flex:none; => 0 0 auto(grow,shrink,basis)
使用flex簡寫形式時，如果某個屬性不寫，那麼他們的默認值是：
flex-grow:1
flex-shrink:1
flex-basis:0
更具體解釋：https://developer.mozilla.org/en-US/docs/Web/CSS/flex
本案例還是使用scss,上篇有使用介紹。
舉例1：
index.html
style.scss(編輯後的css文件不展示)
效果圖：
可以改變上述屬性的屬性值查看不同效果。
舉例2：
example.html
example.scss
example.scss編譯後的example.css
效果圖：
屏幕小於460px時：
