Flex彈性佈局小結

/* 取消整預設的外邊距和內邊距， 將width = border + padding + 內容的  width， height = border + padding + 內容的 height */
*{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

點選我見box-sizing的詳細解釋

display:flex;  /*定義flex彈性盒子模型*/
flex-direction:row | row-reverse | column | column-reverse; /* 定義主軸的方向，元素按照主軸的方向排列， 分別是從左往右，從右往左，從上往下，從下往上*/
 

flex-wrap: nowrap | wrap | wrap-reverse;   /*定義側軸的方向，分別是不拆行，已預設的方向拆行或者拆列，預設的反方向拆行或者拆列*/
/*
flex-flow 是flex-direction 和 flex-flow的合成
order 改變伸縮項的位置，所有伸縮項預設是0， 如果其中一個伸縮項為order為1，它就會跑到最後面
justify-content 控制伸縮項在主軸的展現方式 flex-start，flex-end， center， space-between， space-around
align-items 控制側軸的展現方式 strech flex-start flex-end baseline center（控制一行元素中的伸縮項的展現方式）
align-self 控制單個伸縮項  strech flex-start flex-end baseline center
align-content 控制伸縮項所組成的行列在側軸的展現方式 flex-start，flex-end， center， space-between， space-around
flex-grow 控制伸縮項在伸縮行中的伸展程度
flex-shrink 控制伸縮項在伸縮行中的收縮的程度
*/