2-1. flex-direction屬性

• flex-direction控制彈性項目排列的主要軸向，就是彈性項目的排列方向。

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

2-2. 其他書寫方向

• 預設或設定為row會用與文字方向相同的方向放置彈性項目
• 注意flex-direction與書寫模是屬性（writing-mode、direction、text-orientation）的交互作用

writing-mode

• writing-mode原本設計的是控制內聯元素的顯示的（即所謂的文本佈局-Text Layout）
• writing-mode將頁面默認的水平流改成了垂直流，顛覆了很多我們以往的認知，基於原本水平方向才適用的規則全部都可以在垂直方向適用！
• 如果元素是默認的水平流，則垂直margin會重疊；如果元素是垂直流，則水平margin會重疊。
• 可以使用margin:auto實現垂直居中
• （img元素在IE下不行，其他block元素可以）
• 可以使用text-align:center實現圖片垂直居中
• 可以實現全兼容的icon fonts圖標的旋轉效果
• 截取自：改變CSS世界縱橫規則的writing-mode屬性

direction

• direction: ltr; // 默認值 ，表示left-to-right內聯內容是從左往右依次排布的
• direction: rtl;　//right-to-left縮寫，表示內聯內容是從右往左依次排布的
• 需要注意的是，當direction屬性的值是rtl的時候，我們的文字的前後順序不變（因為改變的只是内联元素块的左右順序）
• CSS direction可以讓我們不改變DOM前後順序的情況下，調換元素的前後順序
• 截取自：CSS direction屬性簡介與實際應用

2-3. 彈性行折行

flex-wrap: nowrap|wrap|wrap-reverse|initial|inherit;

• 預設情況下彈性項目不會折行
• flex-wrap屬性控制了彈性容器是否限制為只允許易行的彈性項目，或是能在必要時拓充為多行。
• 當設定為|wrap-reverse時，相交軸的方向會相反。

2-4. 定義彈性流動

flex-flow: flex-direction || flex-wrap

• flex-flow屬性能定義主軸與相交軸的方向，以及彈性項目是否能在需要時折行。
• flex-flow屬性視同時設定flex-direction與flex-wrap屬性的縮寫屬性，能夠定義彈性容器的折行與主軸、相交軸。
  2-4-1. 認識軸向
• 彈性項目是沿著主軸放置，彈性線則是沿著相交軸方向增加。
• 項目實際位置取決於彈性方向（flex-direction）、彈性折行（flex-wrapping）、以及書寫模式的組合。

2-5. flex-wrap

• 彈性項目無法縮小到比邊框、內距與邊界範圍的總和還小。