Flex Terms
彈性容器
Flex Container
彈性容器
元素與軸
容器屬性值
在文檔流中的直接子元素才是在彈性元素
彈性元素
彈性布局
布局屬性
方向flex-direction
方向
方向案例
換行flex-wrap
flex-wrap
換行樣例
一次性設置兩個屬性（flex-direction/flex-wrap）
image.png
order順序
默認情況order都是0，可以設置為負值，這是一個相對值，越小越在前。
order
彈性
彈性相關(guān)屬性
flex-basis
flex-grow
彈性相關(guān)屬性
flex-basis
main-size | <width>
main-size指的是主軸上的距離，可能是高度也可能是寬度
設置flex item的初始寬高
flex-grow
number 初始值為0
flex-grow
flex-grow樣例
flex-shrink
number 初始值為1
flex-shrink
flex-shrink樣例
flex
flex
flex樣例
對齊
對齊相關(guān)屬性
對齊相關(guān)屬性
justify-content
與text-align類似但是更加強大
flex-start | flex-end | center | space-between | space-around
flex-start前對齊
flex-end后對齊
center 居中對齊
space-between 平分空白空間
space-around 平分空白空間【包括首尾】
justify-content
justify-content樣例
align-items
設置輔軸上的對齊方式
類似于vertical-align，但是更強大
align-items
align-items樣例
align-self
設置單個flex item在輔軸上的對齊方式
和align-items類似，只不過align-items是在容器上設置的
align-self
align-self樣例
align-content
align-content
對于容器的元素出現(xiàn)了多行，并在容器中有剩余空間，就通過align-content設置
align-content
align-content樣例
