0%

Flex 其實沒有想像中複雜(上)

首先要感謝六角學院的用心栽培、大量付出以及認真的回饋

光是一個Flex居然做了合計20關的海盜遊戲(新手村)免費提供學員們在遊玩中學習

以下是我自己練習並紀錄過程,若是想穩固的學好Flex,會建議自己玩過一次遊戲(新手村)哦!


偉大的Flex系統主要分為交錯軸(垂直)主線軸(水平)
由這兩大軸線系統就能夠組合出既完美又精準且方便的排版模式
Flex 不學嗎?

轉載自 卡斯伯's Blog

  • 小小概念

    屬性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


      如果想了解更多Flex的話,可以繼續到這篇文章去更深入的瀏覽哦!