Flex是Flexible Box的縮寫,意爲彈性佈局。是W3C早期提出的一個新的佈局方案。能夠便捷的實現頁面佈局,目前較高版本的主流瀏覽器都能兼容,兼容狀況以下:css
Flex在移動端開發上已經是主流,好比在h5頁面,微信小程序等等。web
爲何要用彈性佈局呢?
小程序
在傳統的佈局方案主要基於CSS盒子模型,依賴display、position、float等屬性。可是它對於一些特殊的佈局很是不方便,好比盒子水平劇中,實現起來比較繁瑣,各類黑科技。如今咱們用多種方法實現盒子劇中,基礎dom以下:父容器背景爲粉色的容器,目標盒子爲200px的天藍色子容器:微信小程序
實現效果:瀏覽器
傳統方法一:微信
傳統方法二:dom
Flex佈局方法就簡單多了佈局
下面是Flex的使用flex
任何一個容器均可以指定爲Flex佈局,寫法: .box{ display: flex; }, spa
行內元素也可使用Flex佈局, 寫法: .box{ display: inline-flex; },
注意:Webkit內核的瀏覽器需加上-webkit前綴,另外,設爲Flex佈局後,子元素的float、clear及vertical-alian屬性都將失效。
基本概念
父容器設爲flex後,它全部的子元素自動成爲容器成員(這裏的子元素不管是什麼元素,塊級仍是行內,並且只做用於子元素,對孫元素無效,須要繼續在子元素上設置display:flex)。
Flex的基本概念就是容器和軸,容器包括外層的父容器和內層的子容器(也叫項目,flex item),軸包括主軸和交叉軸。以下圖:
容器默認存在兩根軸,水平的主軸(main axis)和垂直的交叉軸(cross axis)。主軸的開始位置(與邊框交叉的點)叫作main start;結束的位置叫main end;交叉軸的開始位置叫cross start;交叉軸結束的未知叫cross end。
子容器(項目)默認沿主軸排列,單個項目佔據的主軸空間叫作main size,佔據交叉軸的空間叫cross size。
Flex 佈局主要涉及12個屬性(不含display:flex),其中容器和子容器各6各,可是日常使用到的基本只有4個屬性,父容器和子容器各2個。
做用於父容器的屬性
. flex-direction
. flex-wrap
. flex-flow
. justify-content
. align-items
. align-content
做用於子容器(項目)的屬性
. order
. flex-grow
. flex-shrink
. flex-basis
. flex
. align-self
詳細介紹
容器屬性
一、flex-direction
flex-direction屬性決定主軸的方向,及子容器(項目)的排列方向。
。 row(默認值):主軸爲水平方向,起點在左端(從左到右排序,至關於float:left);
。 row-reverse:主軸爲水平方向,起點在右端(從右往左排序,至關於float:right);
。 column:主軸爲垂直方向,起點在上沿;
。 column-reverse:主軸爲垂直方向,起點在下沿。
二、flex-wrap
默認狀況下,項目都排在一條線(又稱「軸線」)上。flex-wrap屬性定義,若是一條軸線排不下如何換行。
。 nowrap(默認):不換行;
。 wrap:換行,第一行在上方;
。wrap-reverse:換行,第一行在下方;
三、flex-flow
flex-flow屬性是flex-direction和flex-wrap的簡寫形式,默認值:row nowrap
四、justify-content
justify-content定義了子容器(項目)在主軸上的對齊方式。
。 flex-start(默認值):左對齊;
。 center:居中;
。 flex-end:右對齊;
。 space-between:兩端對齊,子容器(項目)之間的間隔相等;
。 space-around:每一個子容器(項目)兩側的間距相等,因此子容器(項目)的間隔比子容器(項目)與邊框的間隔大一倍;
五、align-items
align-items屬性定義了子容器(項目)在交叉軸的對齊方式。
。 flex-start:交叉軸的起點對齊;
。 center :交叉軸居中;
。 flex-end:交叉軸的終點對齊;
。 baseline:子容器(項目)的第一行文字的基線對齊;
。 stretch(默認值):若是子容器(項目)未設置高度或者設爲auto時,將佔滿整個容器的高度;
六、algin-content
align-content屬性定義了多根軸線的對齊方式,若是子容器(項目)只有一根軸線,該屬性不起做用。
。 flex-start:與交叉軸的起點對齊;
。 center:與交叉軸的中點對齊;
。 flex-end:與交叉軸的終點對齊;
。 space-between:與交叉軸兩端對齊,軸線之間的間隔平均分佈;
。 space-around:每根軸線兩側的間隔都相等,因此,軸線之間的間隔比軸線與邊框的間隔大一倍;
。 stretch(默認值):軸線佔滿整個交叉軸;
容器(項目)屬性
一、order
order屬性定義項目的排列順序,數值越小,排在越前,默認爲0。 .item { order: <integer> }
二、flex-grow
flex-grow屬性定義項目方大比例,默認爲0,即若是存在剩餘空間,也不放大。 .item{ flex-grow: <number>} 注意:負數是至關於默認值
三、flex-shrink
flex-shrink屬性定義了項目的縮小比例,默認爲1,即若是空間不足,該項目將縮小。 .item { flex-shrink: <number> }
若是全部項目的flex-shrink
屬性都爲1,當空間不足時,都將等比例縮小。若是一個項目的flex-shrink
屬性爲0,其餘項目都爲1,則空間不足時,前者不縮小。負值對該屬性無效。
注意:只有當父容器空間不夠時該屬性纔會生效,另外當空間繼續減少時,flex-shrink屬性值越大的子容器(項目)先縮小。
四、flex-basis
flex-basis屬性定義了在分配多餘空間以前,項目佔據的主軸空間(main size)。瀏覽器根據這個屬性,計算主軸是否有多餘空間。
它的默認值爲auto
,即項目的原本大小。 .item { flex-basis: <length> | auto }
注意:它能夠設爲跟width
或height
屬性同樣的值(好比350px),則項目將佔據固定空間。
五、flex
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-self屬性容許單個項目有與其餘項目不同的對齊方式,可覆蓋align-items
屬性。默認值爲auto
,表示繼承父元素的align-items
屬性,若是沒有父元素,則等同於stretch
。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
注意:該屬性可能取6個值,除了auto,其餘都與align-items屬性徹底一致。auto爲默認值!