Flex 布局 (彈性布局)

原文鏈接(阮一峰)


一坎吻、Flex 布局

Flex 是 Flexible Box 的縮寫拍棕,意為"彈性布局"解总,用來為盒狀模型提供最大的靈活性贮匕。
# 任何一個(gè)容器都可以指定為 Flex 布局
.box {
  display: flex;
}

# 行內(nèi)元素也可以使用 Flex 布局。
.box {
  display: inline-flex;
}

# Webkit 內(nèi)核的瀏覽器花枫,必須加上-webkit前綴刻盐。
.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

注意,設(shè)為 Flex 布局以后劳翰,子元素的 float敦锌、clear 和 vertical-align 屬性將失效


二、基本概念

采用 Flex 布局的元素佳簸,稱為 Flex 容器(flex container)乙墙,簡(jiǎn)稱"容器"。它的所有子元素自動(dòng)成為容器成員,稱為 Flex 項(xiàng)目(flex item)听想,簡(jiǎn)稱"項(xiàng)目"腥刹。
flex container

容器默認(rèn)存在兩根軸:水平的主軸(main axis)和垂直的交叉軸(cross axis)谭企。 主軸的開始位置(與邊框的交叉點(diǎn))叫做 main start纺阔,結(jié)束位置叫做 main end;交叉軸的開始位置叫做 cross start症昏,結(jié)束位置叫做 cross end蛙粘。

項(xiàng)目默認(rèn)沿主軸排列垫卤。單個(gè)項(xiàng)目占據(jù)的主軸空間叫做 main size,占據(jù)的交叉軸空間叫做 cross size组题。


三葫男、容器的屬性

以下6個(gè)屬性設(shè)置在容器上。
  • flex-direction
  • flex-wrap
  • flex-flow
  • align-items
  • align-content
  • justify-content
3.1 flex-direction 屬性

flex-direction屬性決定主軸的方向(即項(xiàng)目的排列方向)


.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

flex-direction

# 它可能有4個(gè)值崔列。

row(默認(rèn)值):主軸為水平方向梢褐,起點(diǎn)在左端。
row-reverse:主軸為水平方向赵讯,起點(diǎn)在右端盈咳。
column:主軸為垂直方向,起點(diǎn)在上沿边翼。
column-reverse:主軸為垂直方向鱼响,起點(diǎn)在下沿。

3.2 flex-wrap 屬性

默認(rèn)情況下组底,項(xiàng)目都排在一條線(又稱"軸線")上丈积。flex-wrap屬性定義,如果一條軸線排不下债鸡,如何換行江滨。

flex-wrap
.box {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

flex:nowrap;(默認(rèn))不換行
flex:wrap 換行,第一行在上方
flex:wrap-reverse ; 換行厌均,第一行在下方
3.3 flex-flow 屬性

flex-flow屬性是 flex-direction 屬性和 flex-wrap 屬性的簡(jiǎn)寫形式唬滑,默認(rèn)值為 row nowrap

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

3.4 justify-content 屬性

justify-content 屬性定義了項(xiàng)目在 主軸上的對(duì)齊方式

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

justify-content 屬性

它可能取5個(gè)值,具體對(duì)齊方式與 主軸 的方向有關(guān)棺弊。下面假設(shè)主軸為 從左到右晶密。

  • flex-start(默認(rèn)值):左對(duì)齊
  • flex-end:右對(duì)齊
  • center: 居中
  • space-between:兩端對(duì)齊,項(xiàng)目之間的間隔都相等模她。
  • space-around:每個(gè)項(xiàng)目?jī)蓚?cè)的間隔相等稻艰。所以,項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍侈净。
3.5 align-items屬性

align-items 屬性定義項(xiàng)目在交叉軸上如何對(duì)齊

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

align-items

它可能取5個(gè)值连锯。具體的對(duì)齊方式與交叉軸的方向有關(guān)归苍,下面假設(shè)交叉軸從上到下。

  • flex-start:交叉軸的起點(diǎn)對(duì)齊运怖。
  • flex-end:交叉軸的終點(diǎn)對(duì)齊。
  • center:交叉軸的中點(diǎn)對(duì)齊夏伊。
  • baseline: 項(xiàng)目的第一行文字的基線對(duì)齊摇展。
  • stretch(默認(rèn)值):如果項(xiàng)目未設(shè)置高度或設(shè)為auto,將占滿整個(gè)容器的高度溺忧。
3.6 align-content屬性

align-content 屬性定義了多根軸線的對(duì)齊方式咏连。如果項(xiàng)目只有一根軸線,該屬性不起作用

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

align-content

該屬性可能取6個(gè)值鲁森。

  • flex-start:與交叉軸的起點(diǎn)對(duì)齊祟滴。
  • flex-end:與交叉軸的終點(diǎn)對(duì)齊。
  • center:與交叉軸的中點(diǎn)對(duì)齊歌溉。
  • space-between:與交叉軸兩端對(duì)齊垄懂,軸線之間的間隔平均分布。
  • space-around:每根軸線兩側(cè)的間隔都相等痛垛。所以草慧,軸線之間的間隔比軸線與邊框的間隔大一倍。
  • stretch(默認(rèn)值):軸線占滿整個(gè)交叉軸匙头。


四漫谷、項(xiàng)目的屬性

以下6個(gè)屬性設(shè)置在項(xiàng)目上。

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self
4.1 order屬性

order屬性定義項(xiàng)目的排列順序蹂析。數(shù)值越小舔示,排列越靠前,默認(rèn)為0电抚。

.item {
  order: <integer>;
}

order
4.2 flex-grow 屬性

flex-grow屬性定義項(xiàng)目的放大比例惕稻,默認(rèn)為 0,即如果存在剩余空間喻频,也不放大缩宜。

.item {
  flex-grow: <number>; /* default 0 */
}

flex-grow

如果所有項(xiàng)目的 flex-grow 屬性都為 1,則它們將等分剩余空間(如果有的話)甥温。如果一個(gè)項(xiàng)目的 flex-grow 屬性為 2锻煌,其他項(xiàng)目都為 1,則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍

4.3 flex-shrink 屬性

flex-shrink屬性定義了項(xiàng)目的縮小比例姻蚓,默認(rèn)為1宋梧,即如果空間不足,該項(xiàng)目將縮小

.item {
  flex-shrink: <number>; /* default 1 */
}

flex-shrink

如果所有項(xiàng)目的 flex-shrink 屬性都為 1狰挡,當(dāng)空間不足時(shí)捂龄,都將等比例縮小释涛。如果一個(gè)項(xiàng)目的 flex-shrink 屬性為0,其他項(xiàng)目都為 1倦沧,則空間不足時(shí)唇撬,前者不縮小。
負(fù)值對(duì)該屬性無效

4.4 flex-basis 屬性

flex-basis 屬性定義了在分配多余空間之前展融,項(xiàng)目占據(jù)的主軸空間(main size)窖认。瀏覽器根據(jù)這個(gè)屬性,計(jì)算主軸是否有多余空間告希。它的默認(rèn)值為 auto扑浸,即項(xiàng)目的本來大小

.item {
  flex-basis: <length> | auto; /* default auto */
}

它可以設(shè)為跟width或height屬性一樣的值(比如350px),則項(xiàng)目將占據(jù)固定空間

4.5 flex 屬性

flex 屬性是 flex-grow, flex-shrink 和 flex-basis 的簡(jiǎn)寫燕偶,默認(rèn)值為 0 1 auto喝噪。后兩個(gè)屬性可選

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

該屬性有兩個(gè)快捷值:auto (1 1 auto)none (0 0 auto)
建議優(yōu)先使用這個(gè)屬性指么,而不是單獨(dú)寫三個(gè)分離的屬性酝惧,因?yàn)闉g覽器會(huì)推算相關(guān)值

4.6 align-self 屬性

align-self 屬性允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式,可覆蓋 align-items 屬性涧尿。默認(rèn)值為auto系奉,表示繼承父元素的 align-items 屬性,如果沒有父元素姑廉,則等同于 stretch

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

align-self

該屬性可能取 6 個(gè)值缺亮,除了 auto,其他都與 align-items 屬性完全一致


相關(guān)鏈接

1.Flex 布局教程:實(shí)例篇
2.CSS Flexible Box Layout (MDN)
3.CSS Tricks
4.英文原文
5.兼容性寫法
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末桥言,一起剝皮案震驚了整個(gè)濱河市萌踱,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌号阿,老刑警劉巖并鸵,帶你破解...
    沈念sama閱讀 217,185評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異扔涧,居然都是意外死亡园担,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,652評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門枯夜,熙熙樓的掌柜王于貴愁眉苦臉地迎上來弯汰,“玉大人,你說我怎么就攤上這事湖雹∮缴粒” “怎么了?”我有些...
    開封第一講書人閱讀 163,524評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵摔吏,是天一觀的道長(zhǎng)鸽嫂。 經(jīng)常有香客問我纵装,道長(zhǎng),這世上最難降的妖魔是什么据某? 我笑而不...
    開封第一講書人閱讀 58,339評(píng)論 1 293
  • 正文 為了忘掉前任橡娄,我火速辦了婚禮,結(jié)果婚禮上哗脖,老公的妹妹穿的比我還像新娘瀑踢。我一直安慰自己,他們只是感情好才避,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,387評(píng)論 6 391
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著氨距,像睡著了一般桑逝。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上俏让,一...
    開封第一講書人閱讀 51,287評(píng)論 1 301
  • 那天楞遏,我揣著相機(jī)與錄音,去河邊找鬼首昔。 笑死寡喝,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的勒奇。 我是一名探鬼主播预鬓,決...
    沈念sama閱讀 40,130評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼赊颠!你這毒婦竟也來了格二?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 38,985評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤竣蹦,失蹤者是張志新(化名)和其女友劉穎顶猜,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體痘括,經(jīng)...
    沈念sama閱讀 45,420評(píng)論 1 313
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡长窄,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,617評(píng)論 3 334
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了纲菌。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片挠日。...
    茶點(diǎn)故事閱讀 39,779評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖驰后,靈堂內(nèi)的尸體忽然破棺而出肆资,到底是詐尸還是另有隱情,我是刑警寧澤灶芝,帶...
    沈念sama閱讀 35,477評(píng)論 5 345
  • 正文 年R本政府宣布郑原,位于F島的核電站唉韭,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏犯犁。R本人自食惡果不足惜属愤,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,088評(píng)論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望酸役。 院中可真熱鬧住诸,春花似錦、人聲如沸涣澡。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,716評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽入桂。三九已至奄薇,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間抗愁,已是汗流浹背馁蒂。 一陣腳步聲響...
    開封第一講書人閱讀 32,857評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蜘腌,地道東北人沫屡。 一個(gè)月前我還...
    沈念sama閱讀 47,876評(píng)論 2 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像撮珠,于是被迫代替她去往敵國(guó)和親沮脖。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,700評(píng)論 2 354