最近專案主要是小程式，小程式裡面的佈局主要採用flex佈局，之前對flex 佈局只是稍作了解，總結下flex 佈局的常用套路

容器

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

.container{
   display: flex;
}

軸(Axis)

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

flex-direction 確立主軸。
justify-content 定義了在當前行上，彈性專案沿主軸如何排布。
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

1. auto
   元素會根據自身的寬度與高度來確定尺寸，但是會自行伸長以吸收flex容器中額外的自由空間，也會縮短至自身最小尺寸以適應容器。這相當於將屬性設定為 "flex: 1 1 auto".
2. initial
   屬性預設值， 元素會根據自身寬高設定尺寸。它會縮短自身以適應容器，但不會伸長並吸收flex容器中的額外自由空間來適應容器 。相當於將屬性設定為"flex: 0 1 auto"。
3. none
   元素會根據自身寬高來設定尺寸。它是完全非彈性的：既不會縮短，也不會伸長來適應flex容器。相當於將屬性設定為"flex: 0 0 auto"。

參考

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