首先要感謝的是六角學院的用心栽培以及大量的付出及回饋
光是一個Flex居然還做了合計幾十關的遊戲免費提供學員們練習
以下是我自己練習並紀錄過程，真心想學好Flex的話，還是建議自己跑過一次流程哦！
偉大的
Flex系統主要分為交錯軸(垂直)和主線軸(水平)
由這兩大軸線系統就能夠組合出既完美又精準且方便的排版模式
好Flex不學嗎？
小小概念
屬性
display中之值block會讓元素換行。
屬性display中之值inline不會讓元素換行。
flex中的交錯軸(垂直)預設排列方是為由左至右。
flex中的主線軸(水平)預設排列方式為由上至下。第一題
把
display的值換成flex就會預設由左至右排列。1
2
3.aims {
display:flex;
}
第一類題
這邊會需要用到一個的屬性
justify-content來決定元素根據交錯軸(垂直)所呈現的位置。第二題
而
flex-end這個值會讓元素貼齊交錯軸(垂直)預設最右上方之終點位置。1
2
3
4.aims {
display: flex;
justify-content: flex-end;
}第三題
而
center這個值就是讓元素根據交錯軸(垂直)預設定位在上方正中心位置。1
2
3
4.aims {
display: flex;
justify-content: center;
}第四題
而
space-around這個值會讓元素根據交錯軸(垂直)等距分散排列，並且會預設對齊上方左右並各留下一些空白。1
2
3
4.aims {
display: flex;
justify-content: space-around;
}第五題
而
space-between這個值會讓元素根據交錯軸(垂直)等距分散排列，並且會預設完全貼齊上方左右位置。1
2
3
4.aims {
display: flex;
justify-content: space-between;
}
第二類題
這邊會需要用到一個的屬性
align-items來決定元素根據主線軸(水平)所呈現的位置。第六題
而
flex-end這個值會讓元素貼齊主線軸(水平)最左下方之終點位置。1
2
3
4.aims {
display: flex;
align-items: flex-end;
}第七題
而
center這個值會讓元素根據主線軸(水平)預設來貼齊最左正中間之位置。1
2
3
4.aims {
display: flex;
align-items: center;
}
混合類題
第八題
利用
justify-content: center以及align-items: center即可讓元素在交錯軸(垂直)與主線軸(水平)上完美置中。1
2
3
4
5.aims {
display: flex;
justify-content: center;
align-items: center;
}第九題
利用
justify-content: space-between讓元素在交錯軸(垂直)左右貼齊，再以align-items: flex-end即可讓元素在主線軸(水平)貼齊下方。1
2
3
4
5.aims {
display: flex;
justify-content: space-between;
align-items: flex-end;
}第十題
利用
flex-wrap: wrap讓元素在超出容器的情況下換行顯示。1
2
3
4.aims {
display: flex;
flex-wrap: wrap;
}第十一題
利用
flex-wrap: wrap-reverse的方式讓元素在超出容器的情況下進行反向換行顯示。1
2
3
4.aims {
display: flex;
flex-wrap: wrap-reverse;
}第十二題
利用
flex-wrap: wrap讓元素在超出容器的情況下換行顯示，再將flrx-start這個值放入align-content屬性中把元素移至Flex開始排列的位置接著顯示，而非由主線軸(水平)開始排列顯示。1
2
3
4
5.aims {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}第十三題
利用
flex-wrap: wrap讓元素在超出容器的情況下換行顯示，下方的三個元素以交錯軸(垂直)的特性設定來justify-content: center，再利用主線軸(水平)的特性來設定align-content: space-between即可以完成。1
2
3
4
5
6.aims {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: space-between;
}第十四題
利用
flex-direction: column讓flex預設的排列方向由左至右變成由上至下顯示。
提示:更改為直向排列後，主線軸(水平→垂直)與交錯軸(垂直→水平)位置會調換
由於主線軸及交錯軸位置調換的關係，故接下來要使用align-items而不是使用justify-content才能正常使用。1
2
3
4
5.aims {
display: flex;
align-items: center;
flex-direction: column;
}第十五題
利用
flex-direction: column讓flex預設的排列方向由左至右變成由上至下顯示，並且以justify-content: center來完成排列顯示。1
2
3
4
5.aims {
display: flex;
flex-direction: column;
justify-content: center;
}第十六題
利用
flex-direction: column讓flex預設的排列方向由左至右變成由上至下顯示，並且以flex-wrap: wrap讓元素在超出容器的情況下換行顯示，再以justify-content: center來完成排列顯示。1
2
3
4
5.aims {
display: flex;
flex-direction: column;
justify-content: center;
}第十七題
利用
flex-direction: column讓flex預設的排列方向由左至右變成由上至下顯示，並且以flex-wrap: wrap-reverse讓元素在超出容器的情況下反向換行顯示，接著以align-content: spacebetween來完成排列顯示。1
2
3
4
5
6.aims {
display: flex;
flex-direction: column;
flex-wrap: wrap-reverse;
align-content: space-between;
}第十八題
利用
flex-direction: column讓flex預設的排列方向由左至右變成由上至下顯示，並且以justify-content: space-around讓上下留白即可完成顯示。1
2
3
4
5
6.aims {
display: flex;
flex-direction: column;
flex-wrap: wrap-reverse;
align-content: space-between;
}第十九題
利用
flex-direction: column-reverse讓flex預設的排列方向由左至右反向變成由下至上顯示，並且以flex-wrap: wrap-reverse讓元素在超出容器的情況下反向換行顯示，接著以align-content:flex-start來貼齊主線軸(垂直)的起始點，即可以完成顯示。1
2
3
4
5
6
7.aims {
display: flex;
flex-direction: column-reverse;
flex-wrap: wrap-reverse;
align-content: flex-start;
justify-content: center;
}第二十題
利用
flex-direction: row-reverse讓flex預設的排列方向由左至右反向變成由右至左顯示，並且以justify-content:center讓元素置中主線軸(水平)，接著以align-items:center讓元素置中交錯軸(垂直)，即可以完成顯示。1
2
3
4
5
6.aims {
display: flex;
flex-direction: row-reverse;
justify-content: center;
align-items: center;
}
順帶一提，這個遊戲計算時間是使用localStorage的技術，為了我的面子，請容許我將通關時間給改掉哈哈XD