css flex佈局

1. 容器（container）屬性

   屬性	說明	可能取的值(第一個值為預設值)
   flex-direction	規定主軸方向	row | row-reverse | column | column-reverse
   flex-wrap	規定item超過一行時如何換行	nowrap | wrap | wrap-reverse
   flex-flow	flex-flow: <flex-direction> || <flex-wrap>	預設row nowrap
   justify-content	規定item在主軸上如何對齊	stretch | baseline | flex-start | flex-end | center
   align-items	規定item在交叉軸上如何對齊	stretch | baseline | flex-start | flex-end | center
   align-content	規定多根交叉軸的對齊方式	stretch | flex-start | flex-end | center | space-between | space-around |

2. 專案（item）屬性

   屬性	說明	可能取的值(第一個值為預設值)
   order	定義item在主軸上的排列順序（越小越靠前）	0 | <integer>
   flex-grow	定義item的放大比例（與其他設定了該屬性的item比較）	0(如果存在空間也不放大) | <integer>
   flex-shrink	定義item的縮小比例（與其他設定了該屬性的item比較）	1(如果空間不夠item將縮小) | <integer>
   flex-basis	放縮前item佔據主軸多少空間（根據這個計算剩餘多少空間用於放縮）	auto(本來大小) | <integer>
   flex	flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]	0 1 auto | none(0 0 auto) | auto(1 1 auto) | ...
   align-self	為單個專案設定交叉軸的對齊方式，並覆蓋父元素的align-items	auto(繼承父元素align-items) | stretch | baseline | flex-start | flex-end | center

阮一峰Flex