按作用目標劃分
| 作用在父容器上 | 作用在子項上 |
|---|---|
| flex-direction | flex-grow |
| flex-wrap | flex-shrink |
| flex-flow | flex-basis |
| justify-content | flex |
| align-items | align-self |
| align-content | order |
注意： 父、子只是一個相對的概念故痊，可以根據(jù)實際應(yīng)用情況進行拓展
需要深入理解的幾個屬性
flex-grow 和 flex-shrink 原理
flex-grow 父級寬度大于子項寬度總和的情況生效萌壳，表示子項如何擴展
flex-shrink 父級寬度小于子項寬度總和的情況生效技即，表示子項如何收縮
二者接收的值都是數(shù)字煌寇，flex-grow 默認值為 0（表示：子項不擴展楚堤，父級多余的寬度會空著）阳距，flex-shrink 默認值為 1（表示：子項寬度總和超出父級的寬度的部分塔粒，在每一個子項都要收回來，并且每個子項收縮的量相等）
以下示例父容器為 flex筐摘，寬度350px卒茬，子項有五項：
一船老、flex-grow
設(shè)置各子項的寬度為 50px ，這時子項寬度總和小于flex容器寬度扬虚，父容器剩余寬度 100px
- 如果不設(shè)置
flex-grow努隙，默認每一項都沒有擴展，剩余的空間（寬度 100px）就白在那里了辜昵，如下圖
五項 flex-grow 均為 0 的情形
-
接1荸镊，只有其中一項設(shè)置了擴展數(shù)（數(shù)字任意），則這一項獨占剩余空間堪置，如下圖
第一項設(shè)置了flex-grow躬存，其余項仍為0
3.其中兩項都設(shè)置擴展數(shù)，如下圖
可以看出前兩項等分了剩余的100px岭洲，每一項寬度都增加了50px；
4.給每一項都設(shè)置擴展數(shù)坎匿，如下圖
可以看出每一項都參與了瓜分剩余的100px，在原本自身寬度的基礎(chǔ)上進行了擴展承桥，歸結(jié)下來：
第一項（flex-grow: 1）擴展了寬度：
100/(1+2+3+4+5)*1px...
第五項（flex-grow: 5）擴展了寬度：
100/(1+2+3+4+5)*5px即
flex-grow 就是一個份額驻粟，父級剩余寬度被所有子項的 flex-grow 加起來的總份額進行切分，子項按自己所設(shè)置的份額進行擴展凶异。所以當(dāng) flex 容器只有一個子項設(shè)置了 flex-grow 數(shù)值的時候蜀撑，無論這個數(shù)值設(shè)置為多少，當(dāng)父容器寬度有剩余時剩彬，都是這個子項獨占酷麦。父容器設(shè)置為換行的情況同理。
二襟衰、flex-shrink
設(shè)置各子項的寬度為 80px 贴铜，這時子項寬度總和大于flex容器寬度，超出了 50px
1.如果不設(shè)置flex-shrink瀑晒，默認每一項都會收縮绍坝，并且每一項收縮的寬度是一樣的，如下圖
2.接1苔悦，只給第一項設(shè)置收縮數(shù)為0轩褐，則只有這一項不會收縮，如下圖
同理把介，給前三項設(shè)置flex-shrink為0勤讽，則前三項都不收縮，最后兩項分別收縮25px
2.前三項前三項設(shè)置flex-shrink為0拗踢，第四項不設(shè)置脚牍，第五項flex-shrink為4，如下圖
伸縮量計算邏輯基本上和擴展量的計算相同巢墅，但是不同之處在于诸狭，不設(shè)置 flex-shrink 的子項它的收縮占比默認是1，其余各項按其設(shè)置的數(shù)字占比進行計算君纫，flex-shrink 為0的項不會收縮驯遇。通常在父容器設(shè)置為 nowrap 的情況生效。
flex-basis
當(dāng)父容器的 flex-direction 設(shè)置為 row 時蓄髓，子項的 flex-basis 控制 寬度叉庐，此時設(shè)置 width 不生效；
當(dāng)父容器的 flex-direction 設(shè)置為 column 時会喝，子項的 flex-basis 控制 高度陡叠，此時設(shè)置 height 不生效；
也就是說肢执，flex-basis 僅作用在主軸匾竿，當(dāng)主軸方向為行時，雖然此時設(shè)置 width 不生效蔚万，但是設(shè)置 height 仍然是生效的，二者結(jié)合起來就可以定義子項的尺寸临庇。
但是反璃，當(dāng)某個子項相對于父容器設(shè)置了絕對定位時，flex-basis 不生效假夺，只有 width 和 height 生效淮蜈。
參考：https://stackoverflow.com/questions/34352140/what-are-the-differences-between-flex-basis-and-width
flex
有三種取值的可能：
1.一個值的情況，表示 flex-grow （數(shù)字）或者 flex-basis （百分比或帶單位的數(shù)字）
2.兩個值的情況已卷，表示 flex-grow flex-shrink（兩個數(shù)字）或者 flex-grow flex-basis（一個數(shù)字和一個百分比或帶單位的數(shù)字）
3.三個值的情況梧田，表示flex-grow flex-shrink flex-basis（兩個數(shù)字和一個百分比或帶單位的數(shù)字）
justify-content 與 align-content
justify-content 指的是水平方向上子元素如何分布，戳這里
justify-content 經(jīng)常用到的幾個屬性值：
center
space-around
space-between
space-evenly
flex-start
align-content 指的是豎直方向上子元素如何分布侧蘸，戳這里
