Flex布局（彈性盒子布局）

Flex模型

元素表現為 flex 框時，它們沿着兩個軸來布局：

• 主軸（main axis）是沿着 flex 元素放置的方向延伸的軸（比如頁面上的橫向的行、縱向的列）。該軸的開始和結束被稱為 main start 和 main end。
• 交叉軸（cross axis）是垂直於 flex 元素放置方向的軸。該軸的開始和結束被稱為 cross start 和 cross end。
• 設置了 display: flex 的父元素被稱之為 flex 容器（flex container）。.container
• 在 flex 容器中的彈性盒子元素被稱之為 flex 項（flex item）。.item

一、flex container屬性

1. display
   給flex容器設置display屬性

.container{
	display:flex	|	inline-flex
}

2. flex-direction
   設置主軸的方位和方向。

.container {
    flex-direction: row(default) | row-reverse | column | column-reverse;
}

3. flex-wrap
   設置換行

.container {
    flex-wrap: nowrap(default) | wrap | wrap-reverse;
}

4. flex-flow
   集合屬性，同時定義flex-direction和flex-wrap。

.container {
    flex-flow: row-reverse wrap-reverse;
}

5. justify-content
   設置行內的項目如何水平對齊

.container {
    justify-content: flex-start(default) | flex-end | center | space-between | space-around | space-evenly;
}

6. align-items
   設置行內的項目如何垂直對齊。

.container {
    align-items: stretch(default) | flex-start | flex-end | center | baseline;
}

7. align-content
   如果容器的交叉軸方向有富余空間，設置每行應該如何垂直對齊。

.container {
    align-content: stretch(default) | flex-start | flex-end | center | space-between | space-around | space-evenly;
}

二、flex item屬性

1. order
   設置彈性項目在布局時的順序。

.item {
    order: <integer>;
}

• 默認值是0
• order 值大的 flex 項比 order 值小的在顯示順序中更靠后。

3. flex-grow
   設置flex項怎么瓜分行內的富余空間。定義flex項（flex item）的拉伸因子。

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

• 默認值是0。
• 按照總份數瓜分富余空間。

4. flex-shrink
   設置flex項怎么承擔行內的負債空間。定義flex項（flex item）的收縮規則。

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

• 默認值是1。
• 按照總份數承擔行內的負債空間。

5. flex-basis
   設置了 flex 元素在主軸方向上的初始大小。它是width屬性的替代品，優先級比width高。

.item {
    flex-basis: <'width'>;
}

• 默認值是auto
• 依賴flex項目的content

6. flex
   一個集合屬性，可以同時設置flex-grow、flex-shrink和flex-basis。

.item {
    flex: <'flex-grow'> | <'flex-grow'> <'flex-shrink'> <'flex-basis'>;
}

7. align-self
   設置彈性項目自身在行內的垂直對齊方式。

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

• 默認值是auto。