深入理解 flex 相關(guān)屬性

按作用目標劃分

作用在父容器上 作用在子項上
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

  1. 如果不設(shè)置flex-grow努隙,默認每一項都沒有擴展,剩余的空間(寬度 100px)就白在那里了辜昵,如下圖
    五項 flex-grow 均為 0 的情形
  1. 接1荸镊,只有其中一項設(shè)置了擴展數(shù)(數(shù)字任意),則這一項獨占剩余空間堪置,如下圖


    第一項設(shè)置了flex-grow躬存,其余項仍為0

3.其中兩項都設(shè)置擴展數(shù),如下圖


前面兩項都設(shè)置了flex-grow:1舀锨,其余項仍為0

可以看出前兩項等分了剩余的100px岭洲,每一項寬度都增加了50px;

4.給每一項都設(shè)置擴展數(shù)坎匿,如下圖

依次設(shè)置擴展數(shù)為1盾剩,2,3替蔬,4告私,5

可以看出每一項都參與了瓜分剩余的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玖详,不收縮

同理把介,給前三項設(shè)置flex-shrink為0勤讽,則前三項都不收縮,最后兩項分別收縮25px
2.前三項前三項設(shè)置flex-shrink為0拗踢,第四項不設(shè)置脚牍,第五項flex-shrink為4,如下圖
不設(shè)置flex-shrink和設(shè)置了flex-shrink大于0的項按比例收縮

伸縮量計算邏輯基本上和擴展量的計算相同巢墅,但是不同之處在于诸狭,不設(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 指的是豎直方向上子元素如何分布侧蘸,戳這里

align-items 與 align-self

align-items 針對父容器下的所有子元素裁眯,戳這里
align-self 針對單個子元素,戳這里

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末讳癌,一起剝皮案震驚了整個濱河市穿稳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌晌坤,老刑警劉巖逢艘,帶你破解...
    沈念sama閱讀 222,729評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件旦袋,死亡現(xiàn)場離奇詭異,居然都是意外死亡它改,警方通過查閱死者的電腦和手機疤孕,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來央拖,“玉大人祭阀,你說我怎么就攤上這事∨滥啵” “怎么了柬讨?”我有些...
    開封第一講書人閱讀 169,461評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長袍啡。 經(jīng)常有香客問我踩官,道長,這世上最難降的妖魔是什么境输? 我笑而不...
    開封第一講書人閱讀 60,135評論 1 300
  • 正文 為了忘掉前任蔗牡,我火速辦了婚禮,結(jié)果婚禮上嗅剖,老公的妹妹穿的比我還像新娘辩越。我一直安慰自己,他們只是感情好信粮,可當(dāng)我...
    茶點故事閱讀 69,130評論 6 398
  • 文/花漫 我一把揭開白布黔攒。 她就那樣靜靜地躺著,像睡著了一般强缘。 火紅的嫁衣襯著肌膚如雪督惰。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,736評論 1 312
  • 那天旅掂,我揣著相機與錄音赏胚,去河邊找鬼。 笑死商虐,一個胖子當(dāng)著我的面吹牛觉阅,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播秘车,決...
    沈念sama閱讀 41,179評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼典勇,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了叮趴?” 一聲冷哼從身側(cè)響起痴柔,我...
    開封第一講書人閱讀 40,124評論 0 277
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎疫向,沒想到半個月后咳蔚,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體豪嚎,經(jīng)...
    沈念sama閱讀 46,657評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,723評論 3 342
  • 正文 我和宋清朗相戀三年谈火,在試婚紗的時候發(fā)現(xiàn)自己被綠了侈询。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,872評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡糯耍,死狀恐怖扔字,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情温技,我是刑警寧澤革为,帶...
    沈念sama閱讀 36,533評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站舵鳞,受9級特大地震影響震檩,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜蜓堕,卻給世界環(huán)境...
    茶點故事閱讀 42,213評論 3 336
  • 文/蒙蒙 一抛虏、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧套才,春花似錦迂猴、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,700評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至傻寂,卻和暖如春以清,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背崎逃。 一陣腳步聲響...
    開封第一講書人閱讀 33,819評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留眉孩,地道東北人个绍。 一個月前我還...
    沈念sama閱讀 49,304評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像浪汪,于是被迫代替她去往敵國和親巴柿。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,876評論 2 361