從淺入深全面了解CSS3彈性盒布局模型

Reference
阮一峰老師·Flex布局教程
runoob·Flex布局

一容燕、CSS3彈性盒子

彈性盒子是CSS3的一種新布局模式埃脏。

CSS3 彈性盒( Flexible Box 或 flexbox)峰搪,是一種當(dāng)頁面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?/p>

引入彈性盒布局模型的目的是提供一種更加有效的方式來對一個容器中的子元素進(jìn)行排列、對齊和分配空白空間偎快。

二囊咏、瀏覽器支持

表格中的數(shù)字表示支持該屬性的第一個瀏覽器的版本號。

緊跟在數(shù)字后面的 -webkit- 或 -moz- 為指定瀏覽器的前綴来涨。

| Basic support (single-line flexbox) | 29.0 21.0 -webkit- | 11.0 | 22.0 18.0 -moz- | 6.1 -webkit- | 12.1 -webkit- |
| Multi-line flexbox | 29.0 21.0 -webkit- | 11.0 | 28.0 | 6.1 -webkit- | 17.0 15.0 -webkit- 12.1 |

三图焰、CSS3 彈性盒子內(nèi)容

彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。

彈性容器通過設(shè)置 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器蹦掐。

彈性容器內(nèi)包含了一個或多個彈性子元素技羔。

注意: 彈性容器外及彈性子元素內(nèi)是正常渲染的僵闯。彈性盒子只定義了彈性子元素如何在彈性容器內(nèi)布局。

彈性子元素通常在彈性盒子內(nèi)一行顯示藤滥。默認(rèn)情況每個容器只有一行鳖粟。

以下元素展示了彈性子元素在一行內(nèi)顯示,從左到右:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>FLEX</title>
    <style>
        .flex-container {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            width: 1200px;
            height: 640px;
            background-color: lightsteelblue;
        }
        .flex-container .flex-item {
            width: 320px;
            height: 240px;
            margin: 10px;
            background-color:lightsalmon;
        }
    </style>
</head>
<body>
    <div class="flex-container">
        <div class="flex-item"></div>
        <div class="flex-item"></div>
        <div class="flex-item"></div>
    </div>
</body>
</html>

四拙绊、CSS3 彈性盒子常用屬性

屬性 描述
flex-direction 指定彈性容器中子元素排列方式
flex-wrap 設(shè)置彈性盒子的子元素超出父容器時是否換行
flex-flow flex-direction 和 flex-wrap 的簡寫
align-items 設(shè)置彈性盒子元素在側(cè)軸(縱軸)方向上的對齊方式
align-content 修改 flex-wrap 屬性的行為向图,類似 align-items, 但不是設(shè)置子元素對齊,而是設(shè)置行對齊
justify-content 設(shè)置彈性盒子元素在主軸(橫軸)方向上的對齊方式

1. flex-direction 屬性

決定項目的方向标沪。

注意:如果元素不是彈性盒對象的元素榄攀,則 flex-direction 屬性不起作用。

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

屬性值

描述
row 默認(rèn)值金句。元素將水平顯示檩赢,正如一個行一樣。
row-reverse 與 row 相同趴梢,但是以相反的順序漠畜。
column 元素將垂直顯示,正如一個列一樣坞靶。
column-reverse 與 column 相同憔狞,但是以相反的順序。

2. flex-wrap 屬性

flex-wrap 屬性規(guī)定flex容器是單行或者多行彰阴,同時橫軸的方向決定了新行堆疊的方向瘾敢。

描述
nowrap 默認(rèn)值。規(guī)定元素不拆行或不拆列尿这。
wrap 規(guī)定元素在必要的時候拆行或拆列簇抵。
wrap-reverse 規(guī)定元素在必要的時候拆行或拆列,但是以相反的順序射众。
.flex-container { flex-wrap: nowrap | wrap | wrap-reverse; }

可以取三個值:
(1) nowrap (默認(rèn)):不換行碟摆。

[圖片上傳失敗...(image-57954c-1538145710285)]

(2)wrap:換行,第一行在上方叨橱。

(3)wrap-reverse:換行典蜕,第一行在下方。

3. flex-flow 屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式罗洗,默認(rèn)值為row nowrap愉舔。

.flex-container { flex-flow: <flex-direction> <flex-wrap> }

4. align-items屬性

align-items 屬性定義flex子項在flex容器的當(dāng)前行的側(cè)軸(縱軸)方向上的對齊方式。

描述
stretch 默認(rèn)值伙菜。項目被拉伸以適應(yīng)容器轩缤。
center 項目位于容器的中心。
flex-start 項目位于容器的開頭。
flex-end 項目位于容器的結(jié)尾火的。
baseline 項目位于容器的基線上壶愤。

5. justify-content屬性

justify-content 用于設(shè)置或檢索彈性盒子元素在主軸(橫軸)方向上的對齊方式。

描述
flex-start 默認(rèn)值馏鹤。項目位于容器的開頭公你。
flex-end 項目位于容器的結(jié)尾。
center 項目位于容器的中心假瞬。
space-between 項目位于各行之間留有空白的容器內(nèi)。
space-around 項目位于各行之前迂尝、之間脱茉、之后都留有空白的容器內(nèi)。

五垄开、彈性子元素屬性

屬性 描述
order 設(shè)置彈性盒子的子元素排列順序琴许。
flex-grow 設(shè)置或檢索彈性盒子元素的擴(kuò)展比率。
flex-shrink 指定了 flex 元素的收縮規(guī)則溉躲。flex 元素僅在默認(rèn)寬度之和大于容器的時候才會發(fā)生收縮榜田,其收縮的大小是依據(jù) flex-shrink 的值。
flex-basis 用于設(shè)置或檢索彈性盒伸縮基準(zhǔn)值锻梳。
flex 設(shè)置彈性盒子的子元素如何分配空間箭券。
align-self 在彈性子元素上使用。覆蓋容器的 align-items 屬性疑枯。

1. order屬性

.flex-container .flex-item { order: <integer>; }

<integer>:用整數(shù)值來定義排列順序辩块,數(shù)值小的排在前面【S溃可以為負(fù)值废亭,默認(rèn)為0。

2. flex-grow屬性

.flex-container .flex-item { flex-grow: <integer>; }

<integer>:一個數(shù)字具钥,規(guī)定項目將相對于其他靈活的項目進(jìn)行擴(kuò)展的量豆村。默認(rèn)值是 0。

3. flex-shrink屬性

.flex-container .flex-item { flex-shrink: <integer>; }

<integer>:一個數(shù)字骂删,規(guī)定項目將相對于其他靈活的項目進(jìn)行收縮的量掌动。默認(rèn)值是 1。

4. flex-basis屬性

.flex-container .flex-item { flex-basis: <integer> | auto; }

<integer>:一個長度單位或者一個百分比桃漾,規(guī)定元素的初始長度坏匪。
auto:默認(rèn)值。長度等于元素的長度撬统。如果該項目未指定長度适滓,則長度將根據(jù)內(nèi)容決定。

5. flex屬性

flex 屬性用于設(shè)置或檢索彈性盒模型對象的子元素如何分配空間恋追。

flex 屬性是 flex-grow凭迹、flex-shrink 和 flex-basis 屬性的簡寫屬性罚屋。

.flex-container .flex-item { flex: flex-grow flex-shrink flex-basis | auto | initial | inherit; }

描述
flex-grow 一個數(shù)字,規(guī)定項目將相對于其他元素進(jìn)行擴(kuò)展的量嗅绸。
flex-shrink 一個數(shù)字脾猛,規(guī)定項目將相對于其他元素進(jìn)行收縮的量。
flex-basis 項目的長度鱼鸠。合法值:"auto"猛拴、"inherit" 或一個后跟 "%"、"px"蚀狰、"em" 或任何其他長度單位的數(shù)字愉昆。
auto 與 1 1 auto 相同。
none 與 0 0 auto 相同麻蹋。
initial 設(shè)置該屬性為它的默認(rèn)值跛溉,即為 0 1 auto。
inherit 從父元素繼承該屬性扮授。

6. align-self屬性

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

描述
auto 默認(rèn)值芳室。元素繼承了它的父容器的 align-items 屬性。如果沒有父容器則為 "stretch"刹勃。
stretch 元素被拉伸以適應(yīng)容器堪侯。
center 元素位于容器的中心。
flex-start 元素位于容器的開頭荔仁。
flex-end 元素位于容器的結(jié)尾抖格。
baseline 元素位于容器的基線上。
initial 設(shè)置該屬性為它的默認(rèn)值咕晋。
inherit 從父元素繼承該屬性雹拄。

取值同 align-items。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末掌呜,一起剝皮案震驚了整個濱河市滓玖,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌质蕉,老刑警劉巖势篡,帶你破解...
    沈念sama閱讀 221,273評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異模暗,居然都是意外死亡禁悠,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,349評論 3 398
  • 文/潘曉璐 我一進(jìn)店門兑宇,熙熙樓的掌柜王于貴愁眉苦臉地迎上來碍侦,“玉大人,你說我怎么就攤上這事〈刹” “怎么了站玄?”我有些...
    開封第一講書人閱讀 167,709評論 0 360
  • 文/不壞的土叔 我叫張陵,是天一觀的道長濒旦。 經(jīng)常有香客問我株旷,道長,這世上最難降的妖魔是什么尔邓? 我笑而不...
    開封第一講書人閱讀 59,520評論 1 296
  • 正文 為了忘掉前任晾剖,我火速辦了婚禮,結(jié)果婚禮上梯嗽,老公的妹妹穿的比我還像新娘钞瀑。我一直安慰自己,他們只是感情好慷荔,可當(dāng)我...
    茶點故事閱讀 68,515評論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著缠俺,像睡著了一般显晶。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上壹士,一...
    開封第一講書人閱讀 52,158評論 1 308
  • 那天磷雇,我揣著相機(jī)與錄音,去河邊找鬼躏救。 笑死唯笙,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的盒使。 我是一名探鬼主播崩掘,決...
    沈念sama閱讀 40,755評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼少办!你這毒婦竟也來了苞慢?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,660評論 0 276
  • 序言:老撾萬榮一對情侶失蹤英妓,失蹤者是張志新(化名)和其女友劉穎挽放,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蔓纠,經(jīng)...
    沈念sama閱讀 46,203評論 1 319
  • 正文 獨居荒郊野嶺守林人離奇死亡辑畦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,287評論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了腿倚。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片纯出。...
    茶點故事閱讀 40,427評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出潦刃,到底是詐尸還是另有隱情侮措,我是刑警寧澤,帶...
    沈念sama閱讀 36,122評論 5 349
  • 正文 年R本政府宣布乖杠,位于F島的核電站分扎,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏胧洒。R本人自食惡果不足惜畏吓,卻給世界環(huán)境...
    茶點故事閱讀 41,801評論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望卫漫。 院中可真熱鬧菲饼,春花似錦、人聲如沸列赎。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,272評論 0 23
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽包吝。三九已至饼煞,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間诗越,已是汗流浹背砖瞧。 一陣腳步聲響...
    開封第一講書人閱讀 33,393評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留嚷狞,地道東北人块促。 一個月前我還...
    沈念sama閱讀 48,808評論 3 376
  • 正文 我出身青樓,卻偏偏與公主長得像床未,于是被迫代替她去往敵國和親竭翠。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,440評論 2 359

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

  • 移動開發(fā)基本知識點 一.使用rem作為單位 html { font-size: 100px; } @media(m...
    橫沖直撞666閱讀 3,482評論 0 6
  • H5移動端知識點總結(jié) 閱讀目錄 移動開發(fā)基本知識點 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇閱讀 4,518評論 0 26
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color薇搁,font逃片,text-align,li...
    wzhiq896閱讀 1,759評論 0 2
  • 選擇qi:是表達(dá)式 標(biāo)簽選擇器 類選擇器 屬性選擇器 繼承屬性: color只酥,font褥实,text-align,li...
    love2013閱讀 2,316評論 0 11
  • 閱讀目錄移動開發(fā)基本知識點 calc基本用法box-sizing的理解及使用理解display:box的布局理解f...
    張憲宇閱讀 1,532評論 0 1