彈性盒子

1.彈性盒子/伸縮盒子

如果要使用彈性盒子屬性，首先要將父級元素變成彈性盒子

Flex-direction 設置伸縮盒子的內部元素的排列方式

Row    從左到右安行排列

Column  從上到下按照列排列

Row-reverse   從右到左按照行排列

Column-reverse  從下到上按照列排列

Flex-shrink  設置彈性盒子的內部元素的收縮方式

注意：所有盒子的默認收縮方式都是1

Flex-grow   設置彈性盒子的擴展比例

注意：所有盒子的默認擴展比率為0

Flex-basis   設置伸縮盒子內部元素的基準值

注意：所有元素默認伸縮基準值為元素的寬度

Flex-wrap 設置伸縮盒子的子元素超出的處理方式

Nowrap   自動收縮子元素以適應盒子

Wrap     超出盒子換到下一行

Wrap-reverse   超出盒子換到上一行

Justify-content  設置伸縮盒子的子元素在水平方向的對齊方式

Flex-start   靠左對齊

Flex-end    靠右對齊

Center      居中對齊

Flex-between   兩端對齊

Flex-around    平均分布

如果flex-between和flex-around這兩個屬性不起作用的話可以換成

Space-between和space-around

Align-items  設置伸縮盒子的子元素的排列方式

Flex-start  在伸縮盒子的左上角排列

Flex-end   在伸縮盒子的左下角排列

Center     在伸縮盒子的中間排列

Baseline   在伸縮盒子的左上角基線排列

Strecth     拉伸所有的子元素同父元素等高

Align-self  針對伸縮盒子中的某個元素單獨設置排列方式

Auto   使用默認方式

Flex-start   在伸縮盒子左上角排列

Flex-end   在伸縮盒子的左下角排列

Center     在伸縮盒子的中間排列

Baseline   在伸縮盒子的左上角基線排列

Strecth     拉伸所有的子元素同父元素等高

注意：該屬性是在align-items的基礎上對某個子元素進行單獨設定

該屬性的默認方式并不是左上角，而是父級添加的屬性

Align-content   設置伸縮盒子的子元素換行后的對齊方式

注意：如果伸縮盒子的子元素沒有換行，那么該屬性無效

Flex-start  換行內容靠左上角

Flex-end   換行內容靠左下角

Center     換行內容居中顯示

Space-between   換行內容在垂直方向的頂部和底部分開

Space-around   各行在彈性盒子容器中平均分布，兩端保留子元素和子元素之間間距大小的一半

Strecth    拉伸子元素

Order  設置彈性盒子內的子元素的排列順序

值為整數

數越小，排列越靠前