flex佈局學習總結

最近項目主要是小程序，小程序裏面的佈局主要採用flex佈局，以前對flex 佈局只是稍做了解，總結下flex 佈局的經常使用套路

容器

Flex是Flexible Box的縮寫，意爲」彈性佈局」，用來爲盒狀模型提供最大的靈活性。
任何一個容器均可以指定爲Flex佈局。像這樣:

.container{
   display: flex;
}

軸(Axis)

每一個彈性框佈局包含兩個軸。彈性項目沿其依次排列的那根軸稱爲主軸(main axis)。垂直於主軸的那根軸稱爲側軸(cross axis)。

flex-direction 確立主軸。
justify-content 定義了在當前行上，彈性項目沿主軸如何排布。
align-items 定義了在當前行上，彈性項目沿側軸默認如何排布。
align-self 定義了單個彈性項目在側軸上應當如何對齊，這個定義會覆蓋由 align-items 所確立的默認值。

方向(Direction)

彈性容器的主軸起點(main start)/主軸終點(main end)和側軸起點(cross start)/側軸終點(cross end)描述了彈性項目排布的起點與終點。它們具體取決於彈性容器的主軸與側軸中，由 writing-mode 確立的方向（從左到右、從右到左，等等）。

order 屬性將元素與序號關聯起來，以此決定哪些元素先出現。
flex-flow 屬性是 flex-direction 和 flex-wrap 屬性的簡寫，決定彈性項目如何排布。

行(Line)

根據 flex-wrap 屬性，彈性項目能夠排布在單個行或者多個行中。此屬性控制側軸的方向和新行排列的方向。

尺寸(Dimension)

根據彈性容器的主軸與側軸，彈性項目的寬和高中，對應主軸的稱爲主軸尺寸(main size) ，對應側軸的稱爲 側軸尺寸(cross size)。

min-height 與 min-width 屬性初始值將爲 0。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫，描述彈性項目的總體的伸縮性

CSS屬性flex規定了彈性元素如何伸長或縮短以適應flex容器中的可用空間。這是一個簡寫屬性，用來設置flex-grow, flex-shrink與flex-basis。
大多數狀況下，開發者須要將flex設置爲auto，initial，none，或一個無單位正數

1. auto
   元素會根據自身的寬度與高度來肯定尺寸，可是會自行伸長以吸取flex容器中額外的自由空間，也會縮短至自身最小尺寸以適應容器。這至關於將屬性設置爲 "flex: 1 1 auto".
2. initial
   屬性默認值， 元素會根據自身寬高設置尺寸。它會縮短自身以適應容器，但不會伸長並吸取flex容器中的額外自由空間來適應容器 。至關於將屬性設置爲"flex: 0 1 auto"。
3. none
   元素會根據自身寬高來設置尺寸。它是徹底非彈性的：既不會縮短，也不會伸長來適應flex容器。至關於將屬性設置爲"flex: 0 0 auto"。

參考

• flex [MDN]
• Flex 佈局語法教程