傳統布局基于盒模型, 依賴 display
屬性+position
屬性+float
屬性. 它對于那些特殊布局非常不方便, 比如, 垂直居中不容易實現.
flex布局是什么?
flex是flexible box的縮寫, 意為"彈性布局", 用來為盒狀模型提供最大的靈活度.
-
任何一個容器都可以指定為flex布局.
.box{display: flex;}
-
行內元素也可以使用flex布局
.box{display: inline-flex;}
-
Webkit內核的瀏覽器, 必須加上
-webkit
前綴.box{ display: -webkit-flex; /* Safari */ display: flex; }
注意點: 設為flex布局以后, 子元素的
float
,clear
,vertical-align
屬性將失效
基本概念
采用flex布局的元素, 稱為flex容器(flex container), 簡稱"容器". 它的所有元素自動成為容器的成員, 稱為flex項目(flex item), 簡稱項目.
容器默認存在兩根軸: 水平的主軸和垂直的交叉軸. 主軸的開始位置(與邊框的交叉點)叫做main start
, 結束位置交錯main end
; 交叉軸的開始位置叫做 cross start
, 結束位置叫做cross end
.
項目默認沿著主軸排列. 單個項目占據的主軸空間叫做main size
, 占據的交叉軸空間叫做cross size
.
容器的屬性
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
3.1flex-direction
屬性決定主軸的方向(即項目的排列方向)
.box {
flex-direction: row | row-reverse | column | column-reverse;
}
-
row
(默認值): 主軸為水平方向, 起點在左端 -
row-reverse
: 主軸為水平方向, 起點在右端 -
column
: 主軸為垂直方向, 起點在上沿 -
column-reverse
: 主軸為垂直方向, 起點在下沿
3.2 flex-wrap屬性
默認情況下, 項目都排在一條線(又稱軸線)上, flex-wrap
定義, 如果一條軸線排不下, 如何換行.
.box{
flex-wrap: nowrap | wrap | wrap-reverse;
}
nowrap
(默認): 不換行
wrap
: 換行, 第一行在上方
wrap-reverse
: 換行, 第一行在下方.
3.3 flex-flow
flex-flow
屬相是flex-direction
屬性和flex-wrap
屬性的簡寫形式, 默認值為row nowrap
.
.box {
flex-flow: <flex-direction> || <flex- wrap>;
}
3.4 justify-content屬性
justify-content
屬性定義了項目在主軸上的對齊方式.
.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
對齊方式與軸的方向有關. 下面假設主軸從左到右
- flex-start(默認值): 左對齊
- flex-end: 右對齊
- center: 居中
- space-between: 兩端對齊, 項目之間的間隔都相等
- space-around: 每個項目兩側的間隔相等, 因此項目之間的間隔比項目與邊框的間隔大一倍
3.5 align-items屬性
-
align-items
屬性定義項目在交叉軸上如何對齊.box { align-items: flex-start | flex-end | center | baseline | stretch; }
flex-start
: 交叉軸的起點對齊flex-end
: 交叉軸的重點對齊center
: 交叉軸的中點對齊baseline
: 項目的第一行文字的基線對齊stretch
(默認值): 如果項目末設置高度或設為auto, 將占滿整個容器的高度
3.6 align-content屬性
align-content
屬性定義了多根軸線的對齊方式. 如果項目只有一根軸線, 該屬性不起作用.
.box {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
-
flex-start
: 與交叉軸的起點對齊. -
flex-end
: 與交叉軸的終點對齊. -
center
: 與交叉軸的中點對齊. -
space-between
: 與交叉軸兩端對齊, 軸線之間的間隔平均分布 -
space-around
: 每根軸線兩側的間隔都相等, 所以軸線之前的間隔比軸線與邊框的間隔大一倍 -
stretch
(默認值): 軸線占滿整個交叉軸
項目的屬性
以下6個設置在項目上order | flex-grow flex-shrink flex-basis flex align-self
order
屬性 定義項目的排列順序. 數值越小, 排列越靠前, 默認為0.-
flex-grow
屬性 定義了項目的放大比例, 默認為0, 也不放大..item { flex-grow: <number>; /* default 0 */ }
如果所有項目的flex-grow
屬性都為1, 則它們將等分剩余空間(如果有的話), 如果一個項目的flex-grow
屬性為2, 其它項目為1, 則前者占據的剩余空間將比其他項多一倍
-
flex-shrink
屬性 定義了項目的縮小比例, 默認為1, 即如果空間不足, 該項目將縮小.- 如果所有項目的
flex-shrink
屬性都為1, 當空間不足時, 都將等比例縮小. 如果一個項目的flex-shrink
屬性為0, 其他項目都為1, 則空間不足時,前者不縮小. - 負值對該屬性無效
- 如果所有項目的
-
flex-basis
屬性 定義了在分配多余空間之前, 項目占據的主軸空間,瀏覽器根據這個屬性, 計算主軸是否有多余空間, 它的默認值是auto, 即為項目的本來大小..item { flex-basis: <length> | auto; /* default auto */ }
- 他可以設為跟
width
或height
屬性一樣的值, 則項目將占據固定空間
- 他可以設為跟
-
flex
屬性是flex-grow
,flex-shrink
,flex-basis
的簡寫. 默認值為0 1 auto
. 后兩個屬性可選..item { flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ] }
- 該屬性有兩個快捷鍵:
auto
(1 1 auto
)和none(0 0 auto).
- 該屬性有兩個快捷鍵:
-
align-self
屬性 允許單個項目有與其他項目不一樣的對齊方式, 可覆蓋align-items
屬性. 默認值為auto
, 表示繼承父元素的align-items
屬性, 如果沒有父元素, 則等同于stretch
..item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }
此文摘于此http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html