CSS3彈性盒模型

CSS3彈性盒模型

1、彈性盒模型　

　　一、採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱「容器」。它的全部子元素自動成爲容器成員，稱爲Flex項目（flex item），簡稱「項目」任何一個容器均可以指定爲Flex佈局。

　　二、display:flex | inline-flex      定義彈性伸縮盒容器類型

　　　　1）flex 將對象做爲彈性伸縮盒顯示。

　　　　2）inline-flex 將對象做爲內聯塊級彈性伸縮盒顯示。

　　　　注意：設爲Flex佈局之後，子元素的float、clear和vertical-align屬性將失效。

　　三、容器的屬性 如下6個屬性設置在容器上

　　　　flex-direction

　　　　flex-wrap

　　　　flex-flow

　　　　justify-content

　　　　align-items

　　　　align-content

　　容器默認存在兩根軸：水平的主軸和垂直的交叉軸。

　　　　主軸的開始位置（與邊框的交叉點）叫作main start，結束位置叫作main end；

　　　　交叉軸的開始位置叫作cross start，結束位置叫作cross end。

　　　　項目默認沿主軸排列。單個項目佔據的主軸空間叫作main size，佔據的交叉軸空間叫作cross size。

　　1）flex-direction 排列盒子方向

　　　　row(默認)： 橫向從左到右排列（橫向 ）。

　　　　row-reverse： 對齊方式與row相反。 （倒序排列）

　　　　column： 縱向從上往下排列（縱向）。

　　　　column-reverse： 對齊方式與column相反。 （倒序排列）

　　

　　2）flex-wrap：nowrap | wrap | wrap-reverse：

　　　　控制flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向

　　　　nowrap（默認）： flex容器爲單行，不換行

　　　　wrap： flex容器爲多行。超出換行

　　　　wrap-reverse： 反轉wrap 排列。

　　　　（1）nowrap（默認）：不換行。

　　　　

　　　　（2）wrap：換行，第一行在上方。

　　　　

　　　　（3）wrap-reverse：換行，第一行在下方。

　　　　

　　3）flex-flow：屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲（row nowrap）

　　4）justify-content   定義了項目在主軸上的對齊方式

　　　　justify-content: flex-start | flex-end | center | space-between | space-around;

　　　　　　flex-start（默認值）： 左對齊

　　　　　　flex-end： 右對齊

　　　　　　center： 居中

　　　　　　space-between： 兩端對齊，項目之間的間隔都相等。

　　　　　　space-around： 每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

　　　　　　

　　5）align-items  屬性定義項目在交叉軸上如何對齊

　　　　align-items: flex-start | flex-end | center | baseline | stretch;

　　　　　　具體的對齊方式與交叉軸的方向有關，下面假設交叉軸從上到下

　　　　　　flex-start： 交叉軸的起點對齊。

　　　　　　flex-end： 交叉軸的終點對齊。

　　　　　　center： 交叉軸的中點對齊。

　　　　　　baseline: 項目的第一行文字的基線對齊。

　　　　　　stretch（默認值）：若是項目未設置寬高或設爲auto，將沿交叉軸佔滿整個容器的高度或寬度。

　　　　　　

　　6）align-content  屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用

　　　　align-content: flex-start | flex-end | center | space-between | space-around | stretch;

　　　　　　flex-start： 與交叉軸的起點對齊。

　　　　　　flex-end： 與交叉軸的終點對齊。

　　　　　　center： 與交叉軸的中點對齊。

　　　　　　space-between： 與交叉軸兩端對齊，軸線之間的間隔平均分佈。

　　　　　　space-around： 每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。

　　　　　　stretch（默認值）：各行將會拉伸以佔用剩餘的空間。若是剩餘的空間是負數，該值等效於'flex-start'。在其它狀況下，剩餘空間被全部行平分，以擴大它們的側軸尺寸 　　注：多行下的align-content會使align-items失效，二者之間會有衝突，因此看狀況使用。

　　　　　　

2、彈性盒子-項目屬性　

　　如下6個屬性設置在項目上：

　　　　order 項目排序

　　　　flex-grow 項目拓展比例

　　　　flex-shrink 項目縮小比例

　　　　flex-basis 定義拓展剩餘空間前，的交叉軸的寬

　　　　flex 複合屬性

　　　　align-self 自定義項目align-items

　　1）order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。能夠負值

　　

　　2）flex-grow：<number> 定義項目的放大比例，（默認爲0） 即若是存在剩餘空間，也不放大。

　　　　　　子元素的尺寸=父級盒子剩餘空間尺寸*子元素的flex-grow屬性值 / 全部子元素的flex-grow屬性值的和

　　　　

　　3）flex-shrink屬性定義了項目的縮小比例，（默認爲1），即若是空間不足，該項目將縮小。爲 0 就不縮小

　　　　　　元素收縮寬度 = 超出寬度 * 元素收縮比/收縮總比

　　　　

　　　　若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。 負值對該屬性無效。

　　4）flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto。

　　　　值：<length> | <percentage> | auto | content

　　　　　　<length>： 用長度值來定義寬度。不容許負值

　　　　　　<percentage>： 用百分比來定義寬度。不容許負值

　　　　　　auto： 無特定寬度值，取決於其它屬性值，auto的計算規則是 檢索一下你是否設置了width（或者height值，取決於flex-direction）就會採用這個值，不然的話最後使用的值是 content。

　　　　　　content： 基於內容自動計算寬度

　　5）flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

　　　　　flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

　　　　　　該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。

　　　　　　建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。

　　6）align-self：屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。

　　　　（默認值爲auto，表示繼承父元素的align-items屬性）。若是沒有父元素，則等同於stretch。

　　　　align-self: auto（默認） | flex-start | flex-end | center | baseline | stretch;