CSS: Flex 布局

彈性布局為盒模型提供了很多常見場景的解決方案源武,比如居中在塔,左右排列。
理解彈性布局左敌,首先要明確彈性布局中重要的兩根坐標軸:主軸和交叉軸逸雹,默認是水平排列营搅,因此默認的主軸是水平軸云挟,交叉軸式垂直軸。每個軸都有它的起點和終點转质,每一項都要在主軸上和交叉軸上分別占據(jù)空間园欣。
Flex布局的屬性分為容器屬性和項目屬性。

容器屬性

flex-direction

主軸上的項目排列方向休蟹,默認值row

  1. flex-direction: row
  2. flex-direction: column
  3. flex-direction: row-reverse
  4. flex-direction: column-reverse
flex-wrap

默認情況下沸枯,所有的項目都會水平或者默認排列在主軸上,如果排列不下赂弓,默認滾動绑榴,flex-wrap定義了在主軸排列不下時,項目如何排列盈魁, 默認nowrap

  1. flex-wrap: wrap
    換行翔怎,第一行在上方
  2. flex-wrap: nowrap
    不換行
  3. flex-wrap: wrap-reverse
    換行,第一行在下方
flex-flow

flex-flowflex-direction+flex-wrap, flex-flow: <flex-direction> || <flex-wrap>;

justify-content

定義了項目整體在主軸上的對齊方式杨耙,默認值為flex-start

  1. justify-content: center
  2. justify-content: flex-start
  3. justify-content: flex-end
  4. justify-content: space-around
  5. justify-content: space-between
  6. justify-content: space-evenly
align-items

定義每一行在交叉軸上的對齊方式赤套,默認值為stretch

  1. align-items: stretch

  2. align-items: flex-start

  3. align-items: flex-end

  4. align-items: center

  5. `align-items: baseline
    每一行項目的第一行文字的基線對齊·


align-content

定義項目整體在交叉軸上的對齊方式,默認值為flex-start

  1. align-content: flex-start

  2. align-content: flex-end

  3. align-content: center

  4. align-content: stretch

  5. align-content: space-around

  6. align-content: space-between

  7. align-content: space-evenly

項目屬性

order

數(shù)值越小珊膜,排列越靠前于毙,默認值為0,假設將第五個元素order設為1辅搬,其在整體的項目(非單行)排列中變成最后一個。

flex-grow

當存在剩余空間時脖旱,項目的放大比例堪遂,默認為0,即即使存在剩余空間萌庆,也不放大溶褪。如果將第一個元素的flex-grow設為0.1,意味著假設存在剩余空間践险,它在主軸上的尺寸將設置為1.1倍和剩余空間的最小值猿妈。如果所有項目的flex-grow一致,將平等分配剩余空間巍虫,若其余項目均為1彭则,某一個是2,那么他分配的剩余空間將是其余的兩倍(不會優(yōu)先保證自身尺寸的兩倍)

flex-shrink

定義了空間不足時占遥,項目的縮小比例俯抖,默認值為1
當空間充足時,可以看出瓦胎,每個項目的寬度大致為200px芬萍。


當空間嚴重不足時尤揣,可以看出,每個項目的最小寬度為100px柬祠。

因此flex-shrink默認值1意味著北戏,當空間不足時,最多壓縮一倍的尺寸漫蛔。當所有的項目flex-shrink值相同時且大于0嗜愈,空間不足,大家等比例縮谐兔ā芝硬;如果所有的項目flex-shrink都為0,空間不足時轧房,大家都不縮邪枰酢;如果只有一個為0奶镶,其他都大于零迟赃,那么只有為0的不縮小厂镇;小于零無效纤壁。

flex-basis

flex-basis屬性定義了在分配多余空間之前,項目占據(jù)的主軸空間捺信。瀏覽器根據(jù)這個屬性酌媒,計算主軸是否有多余空間。它的默認值為auto迄靠,即項目的本來大小秒咨。

flex

flex屬性是flex-grow, flex-shrinkflex-basis的簡寫,默認值為0 1 auto

align-self

align-self屬性允許單個項目有與其他項目不一樣的對齊方式掌挚,可覆蓋align-items屬性雨席。默認值為auto,表示繼承父元素的align-items屬性吠式,如果沒有父元素陡厘,則等同于stretch

  1. flex-start

  2. flex-end

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末特占,一起剝皮案震驚了整個濱河市糙置,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌是目,老刑警劉巖罢低,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡网持,警方通過查閱死者的電腦和手機宜岛,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來功舀,“玉大人萍倡,你說我怎么就攤上這事”偬” “怎么了列敲?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長帖汞。 經(jīng)常有香客問我戴而,道長,這世上最難降的妖魔是什么翩蘸? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任所意,我火速辦了婚禮,結(jié)果婚禮上催首,老公的妹妹穿的比我還像新娘扶踊。我一直安慰自己,他們只是感情好郎任,可當我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布秧耗。 她就那樣靜靜地躺著,像睡著了一般舶治。 火紅的嫁衣襯著肌膚如雪分井。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天霉猛,我揣著相機與錄音杂抽,去河邊找鬼。 笑死韩脏,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的铸磅。 我是一名探鬼主播赡矢,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼阅仔!你這毒婦竟也來了吹散?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤八酒,失蹤者是張志新(化名)和其女友劉穎空民,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡界轩,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年画饥,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片浊猾。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡抖甘,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出葫慎,到底是詐尸還是另有隱情衔彻,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布偷办,位于F島的核電站艰额,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏椒涯。R本人自食惡果不足惜柄沮,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望逐工。 院中可真熱鬧铡溪,春花似錦、人聲如沸泪喊。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽袒啼。三九已至哈扮,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蚓再,已是汗流浹背滑肉。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留摘仅,地道東北人靶庙。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓,卻偏偏與公主長得像娃属,于是被迫代替她去往敵國和親六荒。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 45,870評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 轉(zhuǎn)自博客園阮一峰《flex布局教程:語法篇》 網(wǎng)頁布局(layout)是 CSS 的一個重點應用矾端。 布局的傳統(tǒng)解決...
    鍇一的開發(fā)日記閱讀 231評論 0 0
  • 最近在看小程序 一些css 因為之前沒怎么了解過 看到這塊特此記錄--轉(zhuǎn)自大神阮一峰http://www.ruan...
    我見青山應如是閱讀 311評論 0 0
  • Flex 是 Flexible Box 的縮寫掏击,意為"彈性布局",用來為盒狀模型提供最大的靈活性秩铆。 一砚亭、任何一個容...
    sarah_wqq閱讀 640評論 0 1
  • 網(wǎng)頁布局(layout)是 CSS 的一個重點應用。 布局的傳統(tǒng)解決方案,基于盒狀模型捅膘,依賴 display 屬性...
    coderfl閱讀 1,178評論 0 0
  • Flex(Flexible Box)布局意為”彈性布局”,是CSS3最受歡迎的屬性之一添祸,簡潔、快速篓跛,為盒狀模型提供...
    小小少年小阿清閱讀 791評論 0 1