Flexbox 的青蛙練習網站

偶然看到這練習網站 Flexbox Froggy - A game for learning CSS flexbox 實在太有趣了，很快速地就可以完成所有題目，以下將題目解答附上。

24 題目解答

Level 1

第一題是送分題，簡單介紹怎麼撰寫

#pond {
  display: flex;
  justify-content: flex-end
}

Level 2

#pond {
  display: flex;
  justify-content:center
}

Level 3

#pond {
  display: flex;
  justify-content: space-around
}

Level 4

#pond {
  display: flex;
  justify-content:space-between
}

Level 5

#pond {
  display: flex;
  align-items:flex-end
}

Level 6

#pond {
  display: flex;
  align-items:center;
  justify-content:center;
}

Level 7

#pond {
  display: flex;
  align-items:flex-end;
  justify-content:space-around;
}

Level 8

#pond {
  display: flex;
  flex-direction:row-reverse
}

Level 9

#pond {
  display: flex;
  flex-direction:column;
}

Level 10

#pond {
  display: flex;
  flex-direction:row-reverse;
  justify-content:flex-end;
}

Level 11

#pond {
  display: flex;
  flex-direction:column;
  justify-content:flex-end;
}

Level 12

#pond {
  display: flex;
  flex-direction:column-reverse;
  justify-content:space-between;
}

Level 13

#pond {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-end;
}

Level 14

#pond {
  display: flex;
}

.yellow {
order: 1
}

Level 15

#pond {
  display: flex;
}

.red {
order: -1
}

Level 16

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
align-self:flex-end
}

Level 17

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
align-self: flex-end;
order: 1
}

Level 18

#pond {
  display: flex;
  flex-wrap: wrap;
}

Level 19

#pond {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

Level 20

#pond {
  display: flex;
  flex-flow: column wrap
}

Level 21

#pond {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}

Level 22

#pond {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

Level 23

#pond {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column-reverse;
  align-content: center;
}

Level 24

#pond {
  display: flex;
  flex-direction: column-reverse;
  flex-wrap: wrap-reverse;
  align-content: space-between;
  justify-content: center;
}

重點屬性

• justify-content
  • flex-start: 元素和容器的左端對齊。
  • flex-end: 元素和容器的右端對齊。
  • center: 元素在容器裏居中。
  • space-between: 元素之間保持相等的距離。
  • space-around: 元素周圍保持相等的距離。
• align-items
  • flex-start: 元素與容器的頂部對齊。
  • flex-end: 元素與容器的底部對齊。
  • center: 元素縱向居中。
  • baseline: 元素在容器的基線位置顯示。
  • stretch: 元素被拉伸以填滿整個容器。
• flex-direction
  • row: 元素擺放的方向和文字方向一致。
  • row-reverse: 元素擺放的方向和文字的方向相反。
  • column: 元素從上放到下。
  • column-reverse: 元素從下放到上。
• order
• align-self
  • flex-start
  • flex-end
  • center
  • baseline
  • stretch
• flex-wrap
  • nowrap: 所有的元素都在一行。
  • wrap: 元素自動換成多行。
  • wrap-reverse: 元素自動換成逆序的多行。
• flex-flow
• align-content
  • flex-start: 多行都集中在頂部。
  • flex-end: 多行都集中在底部。
  • center: 多行居中。
  • space-between: 行與行之間保持相等距離。
  • space-around: 每行的周圍保持相等距離。
  • stretch: 每一行都被拉伸以填滿容器。

參考資料

• Flexbox Froggy - A game for learning CSS flexbox