FLEXBOX FROGGY

daymoon_ยท2022๋…„ 2์›” 1์ผ
0

CSS

๋ชฉ๋ก ๋ณด๊ธฐ
2/18
post-thumbnail

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

  • ์ธ๋„ค์ผ ๋ณ€๊ฒฝ
profile
๋ฏธ์ง€์˜ ๊ณต๊ฐ„๐ŸŒ™

0๊ฐœ์˜ ๋Œ“๊ธ€