前言

繼續昨天討論，今天來講Flex Container其他屬性吧。

Flex Container 主要屬性:

flex - flow

flex-flow 屬性是同時設定flex-direction 和 flex-wrap屬性的簡寫，它們共同定義了 flex 容器的主軸和交叉軸，以及定義彈性容器的換行。

flex - flow對書寫模式敏感。

flex - flow: <flex-direction屬性值> <flex-wrap屬性值>
/*<flex-direction>以及<flex-wrap>的各兩個值合併組合，中間有空格*/

只要display設定為flex或inline-flex，而且省略flex-flow、flex-direction與flex-wrap等同於以下宣告：

flex - flow: row;
flex - flow: nowrap;
flex - flow: row nowrap;

為何需要 flex-flow？

flex-flow 既然是 direction 跟 wrap 屬性的簡寫，那是不是有這樣設計的理由？
當彈性容器被設定為flex-flow: column wrap時，第一行沒有足夠空間就會換行產生新的下一行，新的彈性行會沿著交叉軸方向放在前一行的右邊。
而設定flex-flow: column wrap-reverse也是同樣情況，但corss-start與cross-end位置會互換，新的彈性行反而會跑到前一行的左邊。
由此可見，flex-direction 和 flex-wrap對版型有很大影響，並且兩者也同時會互相影響，造成一般是設定一個值也要一併更動另一個值，因此才會設計 flex-flow 屬性來做調整。

軸向

前面基本概念有討論到使用flexbox時要注意兩軸--主軸（main axis）和交叉軸（cross axis）。
而彈性項目是沿著主軸放置，彈性線（flex lines）則是沿著交叉軸方向增加。

彈性線補充：彈性容器中的彈性項目會在彈性線內佈置和對齊，彈性線是用於佈局演算法分組和對齊的**假設容器**。

圖片來自這裡

前面wrap範例是只有一條彈性線的彈性項目，這條由彈性項目構成的線沿著主軸放置，從main-start到main-end延伸；依據flex-direction設定，這個彈性項目可以是並排、由上而下或由下而上，沿著主軸排程一列或一行。

而在圖中可以發現有許多陌生名詞：

主軸 main axis

內容流動的軸，在flexbox是彈性項目流動的方向。

主尺寸 main size

主軸上內容的總長。

main - start

主軸上開始放置內容的端點/起點。

main - end

主軸上開始放置內容的終點，相對於main-start。

交叉軸cross axis

區塊堆疊的方向軸，在flexbox是指允許彈性換行時，新的一行的彈性項目放置的方向。

cross size

沿著交叉軸所有內容物的總長。

cross - start

交叉軸上區塊開始堆疊的側邊。

cross - end

交叉軸上與cross - start相對的側邊。

以上還牽扯到彈性方向（flex-direction）、彈性換行（flex-wrap）以及書寫模式的組合，所以實際上呈現畫面不止圖例那一種。

參考資料

書籍<CSS大全第四版>
Mdn : flex-flow
CSS Flexible Box Layout Module Level 1 -5.3.