.box{
  display: flex;
}

.box{
  display: inline-flex;
}

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

flex items默認都是沿著main axis（主軸）從main start 開始往main end方向排布
	flex-direction決定了main axis的方向，有四個取值row（默認值）、row-reverse、column、column-reverse

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

justify-content決定了flex item在main axis上的對齊方式
	
	flex-start(默認值):與main start對齊
	flex-end：與main end對齊
	center：居中
	space-between：flex items 之間的距離相等，與main start、main end兩端對齊
	space-evenly: flex items 之間的距離相等,flex items與main start 、main end 之間的距離等于flex items之間的距離
	space-around :flex items 之間的距離相等,flex items與main start 、main end 之間的距離等于flex items之間的距離的一半

決定flex items在cross axis上的對齊方式
   
	normal：在彈性布局中，效果和stretch一樣
	stretch：前提是items不設置高度，當flex items 在cross axis 方向的size為auto時，會自動拉伸至填充flex container(或者換句話說：如果項目未設置高度或設為auto，將占滿整個容器的高度。)
	flex-satrt:與cross start 對齊
	flex-end:與cross end 對齊
	center:居中對齊
	baseline:與基準線對齊

 決定了flex container 是單行還是多行
	nowrap(默認)：單行
	wrap：多行
	//這個比較少用
	wrap-reverse:多行（對比wrap，cross start 與cross end相反）

 決定了多行flex items 在cross axis的對齊方式 用法與justify-content相似 一個是橫軸。一個控制豎軸
	stretch(默認值)：與align-items的stretch類似，當items有高度的時候，無效果
	flex-start:與cross start 對齊
	flex-end :與cross end 對齊
	center：居中對齊
	space-between:flex items 之間的距離相等，與cross start、cross end兩端對齊
	space-evently: flex items 之間的距離相等,flex items與cross start 、cross end 之間的距離等于flex items之間的距離
	space-around :flex items 之間的距離相等,flex items與cross start 、cross end 之間的距離等于flex items之間的距離的一半

 order 決定flex items的排布順序  (用的不多)
	可以設置為任意整數（正整數、負整數、0），值越小越排在前面
	默認值為0

 可以通過align-self 覆蓋flex container 設置的align-items
	auto(默認值):遵從flex container的align-items設置
	stretch、flex-start、flex-end、center、baseline效果與align-items一致

決定了flex items如何擴展
	可以設置為任意非父數字（小數，整數 0），默認為0
	當flex container 在main axis方向上有剩余得size時，flex-grow屬性才會有效
	
	如果所有flex items 的flex-grow 綜合sum不超過1，這直接乘以剩余size就是擴展大小、
	如果超過1 擴展size=剩余size*flex-grow/sum

flex-shrink (shrink 縮小，收縮)與flex-grow相似，一個擴展，一個伸縮 
	可以設置為任意非父數字（小數，整數 0），默認為1
	當flex items在main axis 方向上超過了flex container 的size flex-shrink屬性才會生效、
	如果所有flex items 的flex-shrink 總和sum超過1，每個flex item 收縮的size為：
		flex item 超出flex container 的size*收縮比例/每個flex items 的收縮比例之和
	如果sum不超過1，每個flex item 收縮的size為：
		size = 超出的size * flex-shrink值
	flex items收縮后的最終size不能小于min-width\min-height

用來設置flex items 在 main axis方向上的base size
	默認為auto，可以設置具體的寬度數值
	
	決定flex items最終base size 的因素，優先級從高到低
		max-width\max-height\min-width\min-height
		flex-basis
		width\height
		內容本身的size

flex 是flex-grow || flex-shink||flex-basis的簡寫
可以指定1 2 3個值 依次按照上述順序！默認值為 0 1 auto

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}