flex佈局總結

時間 2021-01-21 標籤 flex佈局

flex的容器和元素

一、flex容器屬性詳解

（一）、flex-direction:決定元素的排列方向，它可能有四個值分別是

（1）、row(默認值) 主軸爲水平方向，起點在左端，從左到右排列

（2）、row-reverse 主軸爲水平方法，起點在右端，從右到左排列

（3）、column 主軸爲垂直方向，起點在上沿，從上到下排列

（4）、column-reverse 主軸爲垂直方向，起點在下沿，從下到上排列

（二）、flex-wrap:覺得元素如何換行，它可能有三個值分別是

（1）、nowrap(默認值)不換行

（2）、wrap 換行第一行在上方

（3）、wrap-reverse換行第一行在下方

（三）、flex-flow是flex-direction和flex-wrap的簡寫，默認值爲row nowrap

flex-flow:row nowrap;

（四）、justify-content:定義元素在主軸上的對齊方式，它有五個值，分別是：

（1）、flex-start（默認值）左對齊
（2）、flex-end 右對齊
（3）、center 居中
（4）、space-between 兩端對齊，項目之間間隔相等
（5）、space-around 每個項目兩側的間隔相等，所以，項目之間的間隔比項目與邊框的間隔大一倍。

（五）、align-items:屬性定義項目在交叉軸上如何對齊,它有五個值，分別是：

（1）、flex-start 交叉軸的起點對齊。
（2）、flex-end 交叉軸的終點對齊。
（3）、center 交叉軸的中點對齊。
（4）、baseline 項目的第一行文字的基線對齊。
（5）、stretch （默認值）如果項目未設置高度或設爲auto，將佔滿整個容器的高度。

（六）、align-content屬性，定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。它有六個值，分別是：

（1）、flex-start 與交叉軸的起點對齊，從上到下
（2）、flex-end 與交叉軸的終點對齊，從下到上
（3）、center 與交叉軸的重點對齊，上下左右居中
（4）、space-between 與交叉軸的兩端對齊，軸線之間的間隔平均分佈
（5）、space-around 每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
（6）、stretch 軸線佔滿整個交叉軸。

二、flex元素屬性詳解

（一）、flex-grow:屬性定義項目的放大比例，默認爲0，即如果存在剩餘空間，也不放大。

.item {
  flex-grow: <number>; /* default 0 */
}

（二）、flex-shrink屬性定義了項目的縮小比例，默認爲1，即如果空間不足，該項目將縮小。

.item {
  flex-shrink: <number>; /* default 1 */
}

（三）、flex-basis:

lex-basis屬性定義了在分配多餘空間之前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的本來大小。
它可以設爲跟width或height屬性一樣的值（比如350px），則項目將佔據固定空間。

.item {
  flex-basis: <length> | auto; /* default auto */
}

（四）、flex是grow、shrink、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。該屬性可能取6個值，除了auto，其他都與align-items屬性完全一致。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

（六）、order定義項目的排列順序，數值越小越靠前，默認值爲0

order:2;