Flex之前

在flex布局出現(xiàn)以前，css布局大致就以下幾種布局：

主要使用：

• normal flow 正常流、文檔流
• float + clearfix
• position: relative + position: absolute
• display: inline-block
• 負(fù) margin

Flex來了！

css3新的布局方式——Flex布局！

CSS3提供了一個(gè)額外的布局系統(tǒng)。在這個(gè)新的框模型中，框的子代采用水平或垂直布局，而且可將未使用的空間分配給特定的子代，或者通過“彈性”分配給應(yīng)展開的子代，在各子代間進(jìn)行分配。這些框的嵌套（水平嵌套在垂直中，或垂直嵌套在水平中）可用于在兩個(gè)維度中構(gòu)建布局。

塊級(jí)布局側(cè)重垂直方向，行內(nèi)布局側(cè)重水平方向，而Flex布局與方向無關(guān)

Flex布局可以實(shí)現(xiàn)空間自動(dòng)分配、自動(dòng)對(duì)齊（flexible：彈性、靈活）

Flex適用于簡(jiǎn)單的線性布局，更復(fù)雜的布局還是需要使用grid布局

學(xué)習(xí)Flex

學(xué)習(xí)Flex之前我們先認(rèn)識(shí)一下Flex容器，flex容器分為父容器（container）與子容器（items）

紫色部分為父容器（container）

黃色部分為子容器（items）

父容器（container）屬性：

display:flex 讓一個(gè)元素變成flex容器

一個(gè)容器設(shè)置了display:flex;屬性就定義了一個(gè)flex容器，它的直接子元素會(huì)接受這個(gè)flex環(huán)境

.container {display: flex; /* or inline-flex */ }

flex-direction 改變items流動(dòng)方向（主軸）

設(shè)置或檢索伸縮盒對(duì)象的子元素在父容器中的位置

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

• row 默認(rèn)值，水平從左到右

• row-reverse 水平從右到左

• column 垂直從上到下

• column-reverse 垂直從下到上

flex-wrap 改變折行

設(shè)置或檢索彈性盒模型對(duì)象的子元素超出父容器時(shí)是否換行

默認(rèn)所有的flex item會(huì)嘗試放在一行中，可以通過設(shè)置flex-wrap設(shè)置新行的方向

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

• nowrap 默認(rèn)值，不換行
• wrap 換行
• wrap-reverse 換行，并且顛倒行順序

flex-flow

flex-direction 和 flex-wrap 的縮寫，默認(rèn)值row nowrap

flex-flow: <‘flex-direction’> || <‘flex-wrap’>

justify-content主軸對(duì)齊方式

默認(rèn)主軸是橫軸，除非改變了flex-direction方向

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

• flex-start 默認(rèn)值、彈性盒子元素將向行起始位置對(duì)齊

• flex-end 彈性盒子元素將向行結(jié)束位置對(duì)齊

• center彈性盒子元素將向行中間位置對(duì)齊。該行的子元素將相互對(duì)齊并在行中居中對(duì)齊

• space-between 彈性盒子元素會(huì)平均地分布在行里

• space-around 彈性盒子元素會(huì)平均地分布在行里，兩端保留子元素與子元素之間間距大小的一半

align-items 次軸對(duì)齊方式

默認(rèn)次軸是縱軸

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

• flex-start 彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸起始邊界

• flex-end 彈性盒子元素的側(cè)軸（縱軸）起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界

• center 彈性盒子元素在該行的側(cè)軸（縱軸）上居中放置。（如果該行的尺寸小于彈性盒子元素的尺寸，則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度）

• baseline 如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條，則該值與flex-start等效。其它情況下，該值將參與基線對(duì)齊

• stretch 如果指定側(cè)軸大小的屬性值為auto，則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時(shí)會(huì)遵照min/max-width/height屬性的限制

align-content 多行內(nèi)容分布

設(shè)置或檢索彈性盒堆疊伸縮行的對(duì)齊方式

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

• flex-start 各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側(cè)軸起始邊界緊靠住該彈性盒容器的側(cè)軸起始邊界，之后的每一行都緊靠住前面一行

• flex-end 各行向彈性盒容器的結(jié)束位置堆疊。彈性盒容器中最后一行的側(cè)軸起結(jié)束界緊靠住該彈性盒容器的側(cè)軸結(jié)束邊界，之后的每一行都緊靠住前面一行

• center 各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時(shí)在彈性盒容器中居中對(duì)齊，保持彈性盒容器的側(cè)軸起始內(nèi)容邊界和第一行之間的距離與該容器的側(cè)軸結(jié)束內(nèi)容邊界與第最后一行之間的距離相等

• space-between 各行在彈性盒容器中平均分布。第一行的側(cè)軸起始邊界緊靠住彈性盒容器的側(cè)軸起始內(nèi)容邊界，最后一行的側(cè)軸結(jié)束邊界緊靠住彈性盒容器的側(cè)軸結(jié)束內(nèi)容邊界，剩余的行則按一定方式在彈性盒窗口中排列，以保持兩兩之間的空間相等

• space-around 各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。各行會(huì)按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時(shí)第一行前面及最后一行后面的空間是其他空間的一半

• stretch 各行將會(huì)伸展以占用剩余的空間。剩余空間被所有行平分，以擴(kuò)大它們的側(cè)軸尺寸

子容器（items）屬性：

order item上面加order

.item {order: <integer>; }

order屬性定義項(xiàng)目的排列順序。數(shù)值越小，排列越靠前，默認(rèn)為0，還可以是負(fù)數(shù)

flex-grow 控制自己如何長(zhǎng)胖

屬性定義項(xiàng)目的放大比例，默認(rèn)為0，即如果存在剩余空間，也不放大

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

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

flex-shrink 控制如何變瘦

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

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

一般寫flex-shrink:0; 防止變瘦，默認(rèn)是1

flex-basis 控制基準(zhǔn)寬度，默認(rèn)是auto

flex-basis屬性定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間（main size）。瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間，即項(xiàng)目的本來大小。

flex

flex-grow, flex-shrink,flex-basis 的縮寫，空格隔開

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

align-self 訂制align-items

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

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

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

Flex布局實(shí)踐：

• 頁面布局（topbar+main+tabs）

https://jsbin.com/bocuwebehi/edit?html,css,output

• 完美居中

display: flex; justify-content: center; align-items: center;

flex布局經(jīng)驗(yàn)：

• flex基本可以滿足所有布局需求
• flex 和 margin-xxx: auto配合有意外效果
• 永遠(yuǎn)不要寫死 width 和 height，除非情況特殊
• 用 max-width/min-width/max-height/min-height

重點(diǎn)！記住以下常用屬性：

• display: flex;
• flex-direction: row/column
• flex-wrap: wrap
• justify-content: center/space-between;
• align-items: center

好了放松下，來玩?zhèn)€flex青蛙小游戲

Flexbox Froggy?flexboxfroggy.com

詳情參考阮一峰大神的flex教程！

Flex 布局教程：語法篇 - 阮一峰的網(wǎng)絡(luò)日志?www.ruanyifeng.com

總結(jié)

以上是生活随笔為你收集整理的flex布局一行三个_CSS Flex布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。