0%

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

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

這次為了Flex再度推出合計10關的海盜遊戲(老鳥村)免費提供學員們在遊玩中學習

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


老鳥村的前20題就是新手村的題目,讓各位老鳥們能夠練練手感再度複習一下

那這邊我們就先跳過囉(懶)

  • 小小概念

    屬性order中之值預設 0
    > 0 則會往顯示,反之,< 0 則會往顯示。

  • 第一類題

    這邊會需要用到一個的屬性order來決定元素呈現的順序。

    • 第二十一題

      利用justify-content: center以及align-items: center即可讓元素在交錯軸(垂直)主線軸(水平)上完美置中。
      再使用order屬性將值設為>1則可以讓元素移至右方。

      1
      2
      3
      4
      5
      6
      7
      8
      .aims {
      display: flex;
      align-items: center;
      justify-content: center;
      }
      .power {
      order: 1;
      }

    • 第二十二題

      利用flex-wrap: wrap讓元素換行,接著以justify-content: center讓元素置中,再以flex-direction: column來轉換排列的方式,最後order屬性將值設為>1則可以讓元素移至右方即可以完成顯示。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      .aims {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      flex-direction: column;

      }
      .power {
      order: 1;
      }
  • 第二類題

    flex-basis 為基本大小
    flex-grow 為剩餘空間分配
    flex-shrink 為縮小空間配置

    • 第二十三題

      將睡覺空間和工作空間共同下屬性及值flex-basis: 120px,再來將睡覺空間和工作空間共同下屬性flex-grow,其值分別為21即可完成分配呈現。

      1
      2
      3
      4
      5
      6
      7
      8
      .area-sleep {
      flex-basis: 120px;
      flex-grow: 2;
      }
      .area-work {
      flex-basis: 120px;
      flex-grow: 1;
      }
    • 第二十四題

      將睡覺空間和工作空間共同下屬性及值flex-basis: 120px,再來將睡覺空間利用屬性flex-shrink,其值賦予為0來取消縮小即可完成分配呈現。

      1
      2
      3
      4
      5
      6
      7
      .area-sleep {
      flex-basis: 120px;
      flex-shrink: 0;
      }
      .area-work {
      flex-basis: 120px;
      }
    • 第二十五題

      首先營區的位置從預設的左右排列以flex-direction: column規劃成上下排列,接著睡覺空間和工作空間共同下屬性及值flex-basis: 120px,再來將睡覺空間利用屬性flex-grow,其值分別為32即可完成分配呈現。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      .camp {
      display: flex;
      flex-direction: column;
      }
      .area-sleep {
      flex-basis: 120px;
      flex-grow: 3;

      }
      .area-work {
      flex-basis: 120px;
      flex-grow: 2;
      }
    • 第二十六題

      首先將淺色元素以flex-direction: column反轉為交錯軸(水平)主線軸(垂直),接著利用屬性及值justify-content: center使其置中於主線軸(垂直);再來將深色元素利用屬性及值align-items: center使其置中於交錯軸(水平)即可呈現。

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      .aims {
      display: flex;
      }
      .aims-light {
      display: flex;
      flex-direction: column;
      justify-content: center;
      }
      .aims-dark {
      display: flex;
      align-items: center;
      }
    • 第二十七題

      先將兩個準心區塊 .aims-light, .aims-dark 設有 flex 效果透過 flex-direction 將 .aims-light 改為直向排列,再將內容物設為水平置中使用 flex-basis 設定 .aims-light 的基本大小後,調整 flex-shrink 數值,讓它配置的空間不會小於基本大小使用 flex-wrap 將 .aims-dark 設為多行後,透過 align-content 讓元素對齊最上方。將 .aims-dark 內元素設為水平置中透過 flex-direction 將 .aims-dark 每行排列順序顛倒

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      .aims {
      display: flex;
      }
      .aims-light {
      display: flex;
      flex-direction: column;
      justify-basis: 150px;
      }
      .aims-dark {
      display: flex;
      flex-direction: row-reverse;
      flex-wrap: wrap;
      align-content: flex-start;
      }
    • 第二十八題

      接下來的題目有點bug,等待工程師修復後再進行撰寫。