第五天的需求理解大致上有三件事情：

• 第一個部分為Flex的排版。
• 第二個部分為class樣式的切換，新增樣式跟移除樣式。
• 第三個部分為transition動畫事件的處理。

Flex不外乎有兩個重點，主軸和交錯軸的概念，我認為只要搞清楚這兩個方向，不需要去死背，也能輕鬆寫出Flex，以下為我自己之前學習flex時整理的重點：

主軸流向
	flex-direction: row; //預設 由左至右
	flex-direction: row-reverse; //由右至左
	flex-direction: colume; //由上到下
	flex-direction: colume-reverse; //由下到上
	
主軸對齊方式
	justify-content: flex-start; //由起點開始  預設		
	justify-content: flex-end;	//由終點開始
	justify-content: center; //置中
	justify-content: space-between; //每個小方塊擁有相同的間隔，但與父容器之間沒有間隔
	justify-content: space-around; //每個小方塊之間與父容器有間隔，但小方塊與父容器之間的間隔是小方塊彼此間隔的一半。
	justify-content: space-evenly; //每個小方塊之間和與父容器之間擁有相同的間隔
	
換行
	超出父元素寬度的換行，不自動調整比例。
	flex-wrap: wrap;
	flex-wrap: nowrap: 預設（一直呈現滿版）
	flex-wrap: wrap-reverse; 主軸與交錯軸相反
	
交錯軸對齊方式
	永遠垂直於主軸
	align-items: flex-start; //由起點開始
	align-items: flex-end; //由終點開始
	align-items: center; //置中
	align-items: stretch; //滿版呈現
	align-items: baseline; //子元素內容對其基線，基線通常代表的是文字的底部

最重要的一點是要將display: flex設置在父元素上，再利用上列的屬性去控制子元素的排列。