CSS || flex筆記

Flex佈局

Flex是flexible box的簡稱，純粹用來佈局的屬性

1 flex和inline-flex

任何容器均可以知道爲Flex佈局，塊級元素使用display: flex; ；行內元素使用inline-flex

• 容器使用Flex佈局後，子元素的float、clear和verticle-align屬性將失效

2 基本概念

採用Flex佈局的元素， 稱爲flex container容器。容器內的子元素自動成爲flex container的成員，稱爲flex-item

flex-item的排列方向是main axis：即flex-direction指定主軸是水平或是垂直

容器默認存在水平主軸main axis和垂直的交叉軸cross axis

• main axis：flex-item排列的方向是主軸

• cross axis：與主軸垂直的是交叉軸

• 主軸的開始和結束位置：main start和main end

• 交叉軸的開始和結束位置：cross start和cross end

• flex-item在主軸與交叉軸佔據的空間：main size和cross size

3 flex container的屬性

須要在flex container上設置的屬性有6個：

1. flex-direction：row | row-reverse | column | column-reverse。默認值爲row

   • row（默認值）：主軸是水平方向，flex-item水平排列，main start在左端

   • row-reverse：主軸是水平方向，flex-item水平排列，main start在右端

   • column：主軸是垂直方向，flex-item垂直排列，main start在上邊沿

   • column-reverse：主軸是垂直方向，flex-item垂直排列，main start在下邊沿
     

2. flex-wrap：nowrap | wrap | wrap-reverse。默認狀況下，flex-item都排在一條軸線上；flex-wrap屬性定義若是在一條軸線上排不下，換行的規則。
   

   • nowrap（默認值）：不換行
     

   • wrap：換行，第一行排在上方
     

   • wrap-reverse：換行，第一行排在下方
     

3. flex-flow：是flex-direction和flex-wrap的簡寫，默認值爲row nowrap

   • flex-flow: <flex-direction> && <flex-wrap>

4. justify-content：定義flex-item在主軸main-axis上的對齊方式

   • justify-content: flex-start | flex-end | center | space-between | space-around。五個取值與主軸方向有關

   • flex-start（默認值）：左對齊；flex-end右對齊；center居中；

   • space-between：兩端對其，flex-item間的間隔距離相等

   • space-around：每一個flex-item兩側的間隔相等，至關於設置左右margin值相等。
     

5. align-items：定義flex-item在交叉軸的對其方式

   • align-items: flex-start | flex-end | center | baseline | strecth。五個取值與交叉軸方向有關

   • flex-start交叉軸起點對其；

   • baseline：flex-item的第一行文字的基線對齊

   • stretch（默認值）：若是flex-item沒有設置高度或者值爲auto，將佔滿整個容器高度
     

6. align-content：若是容器內出現多跟軸線（即出現wrap），定義主軸在交叉軸上的對齊方式，只有一根軸線時不起做用

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

   • stretch（默認值）：軸線沾滿整個交叉軸

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

   • space-around：每根軸線兩側的間隔相等

   • flex-start：與交叉軸起點對其

4 flex-item的屬性

在flex-item上設置的屬性一樣是6個：

1. order: <integer>;： 定義flex-item在主軸上的排列順序。數值越小，排列越靠前，默認值爲0。
   

2. flex-grow: <number>：定義flex-item在主軸上的放大比例。默認值爲0：即便存在剩餘空間（寬度），也不放大。

   • 若是全部flex-item的flex-grow屬性值都是1，表示它們均分剩餘空間（若是有）

   • 若是一個flex-item屬性值爲2，其他爲1：前者佔據的空間是後者的2倍
     

3. flex-shrink: <number>：定義flex-item在主軸上的縮小比例。默認值爲1，即若是空間不足，該flex-item會縮小。

   • 若是全部flex-item的flex-shrink屬性值都爲1，在空間不足時，都將等比例縮小

   • flex-shrink爲0的flex-item在空間不足時，不會縮小。
     

4. flex-basis: <length> | auto：定義在分配剩餘空間前，flex-item佔據主軸的空間main size。默認值爲auto，表示flex-item原本的大小。

   • 瀏覽器根據這個屬性計算是否存在多餘空間

   • 若是width和height值固定爲絕對長度單位（如350px），該flex-item佔據固定空間

5. flex屬性：是flex-grow、flex-shrink和flex-basis三個屬性的簡寫，默認值爲0 1 auto

   • 兩個快捷值：none表示(0 0 auto)；auto表示(1 1 auto)

   • 建議優先使用屬性值，而非先單獨寫三個分離的屬性（瀏覽器會自動推算相關值）

6. align-self：容許單個flex-item與其餘flex-item在交叉軸有不一樣的對齊方式，能夠覆蓋掉align-items的值

   • align-items: auto| flex-start | flex-end | center | baseline | strecth

   • 默認值爲auto：表示繼承父元素的align-items屬性

   • 沒有父元素狀況下等同於stretch
     

阮一峯教程Flex佈局教程