按作用目標劃分
作用在父容器上 | 作用在子項上 |
---|---|
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)*1
px...
第五項(flex-grow: 5)擴展了寬度:
100/(1+2+3+4+5)*5
px即
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 指的是豎直方向上子元素如何分布侧蘸,戳這里