flex伸縮布局的相關使用

基本理解可以去菜鳥教程檢視彈性盒子

首先我列出幾種我常用的1.上下左右居中的寫法，（在父盒子裡面寫）

display:flex;
justify-content:center;
align-items:center;

2.控制到第幾個元素的寫法flex：權重，就是可以佔到多寬

.main-column:nth-child(1) 
.main-column:nth-child(2) 
.main-column:nth-child(3)

3.還有後面9標註的乙個自適應頁面的用法

重點：父盒子裡面一定要新增display：flex，這樣彈性布局才可以啟用

從右到左direction：rtl；

1.父容器flex-direction 主要控制子元素的排列方式：預設的子盒子們的排列是從左到右的

flex-direction: row | row-reverse | column | column-reverse

2.父容器justify-content 縱軸對齊的問題：這是水平方向處理子盒子排布最好用的屬性

3.父容器align-items ，可以看作是居上還是居下：一定要注意這是縱向控制位置的。

4.父容器flex-wrap 設定是換行還是不換行

flex-wrap: nowrap | wrap | wrap-reverse |initial |inherit;

5.父容器align-content 類似於align-items，但是它是控制一行內的對其方式

6．子元素屬性

order: 為序號，值越小，排序越靠前

7.子元素margin 設定auto值上下左右自動居中（完美居中）：這是除了justify-content之外另一種居中方式，父盒子無需設定為display:flex,也可以在子盒子中新增給屬性控制單個盒子的水平居中。

margin：0 auto；就是上下邊距為零作用居中的意思

8.子元素align-self，描述彈性元素在縱軸方向上的對齊方式

9.子屬性flex ：感覺基本上使用的就是這種情況：如下圖有父盒子裡面有兩個子盒子，我給右面的子盒子設定了大小，給左面的設定了flex=1，如果該父盒子是100%的寬，則隨著視窗變化的時候，左面的盒子會不斷縮小，有一種頁面自適應的感覺了。

各個值解析:

auto: 計算值為 1 1 auto

initial: 計算值為 0 1 auto

none：計算值為 0 0 auto

inherit：從父元素繼承

[ flex-grow ]：定義彈性盒子元素的擴充套件比率。

[ flex-shrink ]：定義彈性盒子元素的收縮比率。

[ flex-basis ]：定義彈性盒子元素的預設基準值。