Flex之前

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

主要使用：

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

Flex來了！

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

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

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

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

Flex適用于簡單的線性布局，更復雜的布局還是需要使用grid布局

學習Flex

學習Flex之前我們先認識一下Flex容器，flex容器分為父容器（container）與子容器（items）

紫色部分為父容器（container）

黃色部分為子容器（items）

父容器（container）屬性：

display:flex 讓一個元素變成flex容器

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

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

flex-direction 改變items流動方向（主軸）

設置或檢索伸縮盒對象的子元素在父容器中的位置

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

• row 默認值，水平從左到右

• row-reverse 水平從右到左

• column 垂直從上到下

• column-reverse 垂直從下到上

flex-wrap 改變折行

設置或檢索彈性盒模型對象的子元素超出父容器時是否換行

默認所有的flex item會嘗試放在一行中，可以通過設置flex-wrap設置新行的方向

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

• nowrap 默認值，不換行
• wrap 換行
• wrap-reverse 換行，并且顛倒行順序

flex-flow

flex-direction 和 flex-wrap 的縮寫，默認值row nowrap

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

justify-content主軸對齊方式

默認主軸是橫軸，除非改變了flex-direction方向

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

• flex-start 默認值、彈性盒子元素將向行起始位置對齊

• flex-end 彈性盒子元素將向行結束位置對齊

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

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

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

align-items 次軸對齊方式

默認次軸是縱軸

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

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

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

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

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

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

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

設置或檢索彈性盒堆疊伸縮行的對齊方式

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

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

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

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

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

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

• stretch 各行將會伸展以占用剩余的空間。剩余空間被所有行平分，以擴大它們的側軸尺寸

子容器（items）屬性：

order item上面加order

.item {order: <integer>; }

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

flex-grow 控制自己如何長胖

屬性定義項目的放大比例，默認為0，即如果存在剩余空間，也不放大

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

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

flex-shrink 控制如何變瘦

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，該項目將縮小。

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

一般寫flex-shrink:0; 防止變瘦，默認是1

flex-basis 控制基準寬度，默認是auto

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

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; }

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

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

Flex布局實踐：

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

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

• 完美居中

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

flex布局經(jīng)驗：

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

重點！記住以下常用屬性：

• 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)絡日志?www.ruanyifeng.com

總結

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

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