Flex佈局使用總結

全部內容均源自阮一峯老師的文章 Flex 佈局教程：語法篇，不過此總結都是結合平時使用的自我表述。

引言

Flex佈局使得一個框體內部的排版更爲便捷，好比柵格排版，自適應分配長寬，垂直居中等，原來可能須要不少樣式配合來完成，使用flex，就變得更native了。

Flex佈局主要由兩層結構實現，外層container和內層item，固然內層item也能夠是更內層的container

容器：外層container
項目：內層item
主軸：item的排列方向
交叉軸：與主軸垂直

容器的屬性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction

主軸的方向

// row 自左向右
// row-reverse 自右向左
// column 自上而下
// row 自下向上
flex-direction: row(default) | row-reverse | column | column-reverse;

flex-wrap

控制項目的換行規則，由於默認不換號，當項目的寬度之和大於容器的寬度時，會根據項目的一些屬性決定實際寬度分配

// nowrap 不換行
// wrap 換行，新行在下方
// wrap-reverse 換行，新行在上方
flex-wrap: nowrap(default) | wrap | wrap-reverse;

flex-flow

是flex-direction和flex-wrap的縮寫

// 默認 flex-flow: row nowrap
flex-flow: <flex-direction> || <flex-wrap>;

justify-content

主軸上的對齊方式

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

align-items

交叉軸上的對齊方式

// flex-start 交叉軸的起點對齊
// flex-end 交叉軸的終點對齊
// center 交叉軸的中點對齊
// baseline 項目的第一行文字的基線對齊
// stretch 若是項目未設置高度或設爲auto，將佔滿整個容器的高度
align-items: flex-start | flex-end | center | baseline | stretch(default);

align-content

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

// flex-start 與交叉軸的起點對齊
// flex-end 與交叉軸的終點對齊
// center 與交叉軸的中點對齊
// space-between 與交叉軸兩端對齊，軸線之間的間隔平均分佈
// space-around 每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍
// stretch 軸線佔滿整個交叉軸
align-content: flex-start | flex-end | center | space-between | space-around | stretch(default);

重點看上圖的stretch，從item設了高度和沒設高度/auto的區別可看出，stretch的原理是將交叉軸根據行數平分(交叉軸長度/行數)成若干份，若是設了高度，就用真是高度，沒設高度就填充單份高度。

項目的屬性

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order

定義項目的排列順序。數值越小，排列越靠前，能夠是負數，相同時依dom順序。

order: <integer>; // 0 default

flex-grow

定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。負數無效，瀏覽器視做默認值0。

flex-grow: <number>; // 0 default

注意放大比例是從剩餘空間分配的，上圖item最終實際寬度(px)：
圖一：
剩餘寬度restWidth = 300-3*50
紅色寬度redWidth = 1/3*restWidth+50
黃色寬度yellowWidth = 2/3*restWidth+50
綠色寬度greenWidth = 50
圖二依次類推
圖三由於沒有剩餘寬度，發揮做用的是flex-shrink

flex-shrink

定義了項目的縮小比例，即若是空間不足，該項目將縮小，flex-shrink屬性爲0時項目不縮小，負數無效，瀏覽器視做默認值1。

flex-shrink: <number>; // 1 default

注意當flex-shrink屬性爲0的項目總寬度大於等於容器寬度時，即沒有剩餘空間分配時，其他flex-shrink屬性不爲0的項目寬度會縮小成恰好可以容納內容，padding,margin依然有效。上圖item最終實際寬度(px)：
圖一：
剩餘寬度restWidth = 300-3*100 = 0
因此redWidth和yellowWidth變成了可以容納內容的最小寬度
圖二：
剩餘寬度restWidth = 300-2*100 = 100
因此redWidth和yellowWidth按照某種比例分配了restWidth，分配策略還沒弄清楚

flex-basis

flex-grow和flex-shrink都提到了剩餘空間，其實就是根據這個屬性計算的，它的默認值爲auto，即項目的原本大小。bootstrap4的柵格系統就是用了這個屬性替代了bootstrap3的float:left+width%組合。

flex-basis: <length> | auto; // auto default

flex

是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。bootstrap4的柵格系統用的是(0 0 %)

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

align-self

容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

align-self: auto | flex-start | flex-end | center | baseline | stretch;