Flex布局-有解無憂

什么是Flex布局

Flex（縮寫：Flexible Box），通常被稱為 flexbox，意為彈性布局，用來為盒狀模型提供最大的靈活性，

任何一個容器都可以指定為Flex布局，

.box {
  display: flex;
}

行內元素也可以使用Flex布局，

.box {
  display: inline-flex;
}

注意：設為Flex布局后，子元素的float、clear和vertical-align屬性將失效！

基本概念

采用Flex布局的元素，稱為Flex容器（flex container），它的所有子元素自動成為容器成員，稱為Flex專案（flex item），

容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）；

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

交叉軸的開始位置叫做cross start，結束位置叫做cross end；

專案默認沿主軸排列，單個專案占據的主軸空間叫做main size，占據的交叉軸空間叫做cross size，

容器的屬性

容器主要有以下幾個屬性：

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

下面開始逐一進行介紹，

flex-direction

該屬性決定了主軸的方向（即專案的排列方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

它有以下四個值：

row（默認值）：主軸為水平方向，起點在左端；
row-reverse：主軸為水平方向，起點在右端；
column：主軸為垂直方向，起點在上沿；
column-reverse：主軸為垂直方向，起點在下沿；

示例代碼 - flex-direction

flex-wrap

在默認情況下，專案都排在一條線（又稱“軸線”）上

flex-wrap屬性定義，如果一條軸線排不下后，將如何進行換行，

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

它有以下三個值：

nowrap(默認)：所有Flex專案單行排列；
wrap：所有Flex專案多行排列，按從上到下的順序；
wrap-reverse：所有Flex專案多行排列，按從下到上的順序；

示例代碼 - flex-wrap

flex-flow

該屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值為row nowrap，此處就不做介紹了，

.box {
  flex-flow: <flex-direction> <flex-wrap>;
}

justify-content

該屬性定義了專案在主軸上的對齊方式，

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

它有以下六個值：

flex-start(默認)：從起點線開始順序排列；
flex-end：相對終點線順序排列；
center：居中排列；
space-between：專案均勻分布，第一項在起點線，最后一項在終點線；
space-around：專案均勻分布，每一個專案兩側有相同的留白空間，相鄰專案之間的距離是兩個專案之間留白的總和；
space-evenly：專案均勻分布，所有專案之間及專案與邊框之間距離相等；

示例代碼 - justify-content

align-items

該屬性定義專案在交叉軸上如何對齊，

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

它有以下五個值：

stretch(默認)：如果專案未設定高度或設為auto，將占滿整個容器的高度；
flex-start：專案按交叉軸起點線對齊；
flex-end：專案按交叉軸終點線對齊；
center：交叉軸方向專案中間對齊；
baseline：交叉軸方向按第一行文字基線對齊，

示例代碼 - align-items

align-content

該屬性定義了多根軸線的對齊方式，控制了行與行（列與列）之間的空隙，如果專案只有一根軸線，該屬性不起作用，

.box {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

它有以下六個值：

stretch (默認)：拉伸顯示；
flex-start：從起點線開始順序排列；
flex-end：相對終點線順序排列；
center：居中排列；
space-between：專案均勻分布，第一項在啟點線，最后一項在終點線；
space-around：專案均勻分布，每一個專案兩側有相同的留白空間，相鄰專案之間的距離是兩個專案之間留白的和，

示例代碼 - align-content

專案的屬性

專案主要有以下幾個屬性：

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

order

該屬性定義專案的排列順序，數值越小，排列越靠前，默認為0，可以為負值，

.item {
  order: <integer>;
}

示例代碼 - order

flex-grow

該屬性定義專案的放大比例，flex-grow值是一個單位的正整數，表示放大的比例，

默認為0，即如果存在額外空間，也不放大，負值無效，

如果所有專案的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話），

如果一個專案的flex-grow屬性為2，其他專案都為1，則前者占據的剩余空間將比其他項多一倍，

.item {
  flex-grow: <number>;
}

示例代碼 - flex-grow

flex-shrink

該屬性定義了專案的縮小比例，默認為1，即如果空間不足，該專案將縮小，0表示不縮小，負值無效，

.item {
  flex-shrink: <number>;
}

示例代碼 - flex-shrink

flex-basis

該屬性定義了在分配多余空間之前，專案占據的主軸空間（main size），瀏覽器根據這個屬性，計算主軸是否有多余空間，它的默認值為auto，即專案的本來大小，

它可以設為跟width或height屬性一樣的值（比如350px），則專案將占據固定空間，

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

示例代碼 - flex-basis

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-items屬性，

默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，則等同于stretch，

除了auto值以外，align-self屬性與容器的align-items屬性基本一致，

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

示例代碼 - align-self

Flex布局