FLEXBOX FROGGY?

🤔 문제 링크 : Flexbox Defense

CSS 코드로 개구리가 수련잎에 올라갈 수 있도록 돕기

---

📑 답안

✅ 단계 1

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

✅ 단계 2

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

✅ 단계 3

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

✅ 단계 4

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

✅ 단계 5

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

✅ 단계 6

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

✅ 단계 7

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

✅ 단계 8

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

✅ 단계 9

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

✅ 단계 10

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

✅ 단계 11

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

✅ 단계 12

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

✅ 단계 13

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

✅ 단계 14

#pond {
  display: flex;
}

.yellow {
  order: 1;
}

✅ 단계 15

#pond {
  display: flex;
}

.red {
  order: -1;
}

✅ 단계 16

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

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

✅ 단계 17

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

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

✅ 단계 18

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

✅ 단계 19

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

✅ 단계 20

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

✅ 단계 21

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

✅ 단계 22

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

✅ 단계 23

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

✅ 단계 24

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

---

🗓️ 수정 및 추가

✅ 2022.02.26

• 썸네일 변경