#TIL10, CSS FLEXBOX FROGGY๐Ÿธ

Aprilยท2021๋…„ 4์›” 18์ผ
0

HTML | CSS

๋ชฉ๋ก ๋ณด๊ธฐ
7/10
post-thumbnail

๊ฐœ์ธ ๊ณต๋ถ€๋ฅผ ์œ„ํ•ด ์ž‘์„ฑํ–ˆ์Šต๋‹ˆ๋‹ค

Flexbox ๋ž€?

์ผ๋ช… flexbox๋ผ ๋ถˆ๋ฆฌ๋Š” Flexible Box module์€ flexbox ์ธํ„ฐํŽ˜์ด์Šค ๋‚ด์˜ ์•„์ดํ…œ ๊ฐ„ ๊ณต๊ฐ„ ๋ฐฐ๋ถ„๊ณผ ๊ฐ•๋ ฅํ•œ ์ •๋ ฌ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๊ธฐ ์œ„ํ•œ 1์ฐจ์› ๋ ˆ์ด์•„์›ƒ ๋ชจ๋ธ.
flexbox๋ฅผ 1์ฐจ์›์ด๋ผ ์นญํ•˜๋Š” ๊ฒƒ์€, ๋ ˆ์ด์•„์›ƒ์„ ๋‹ค๋ฃฐ ๋•Œ ํ•œ ๋ฒˆ์— ํ•˜๋‚˜์˜ ์ฐจ์›(ํ–‰์ด๋‚˜ ์—ด)๋งŒ์„ ๋‹ค๋ฃฌ๋‹ค๋Š” ๋œป์ด๋‹ค.

โœจ์ฐธ๊ณ โœจ 2์ฐจ์› ๋ชจ๋ธ: ํ–‰๊ณผ ์—ด์„ ํ•จ๊ป˜ ์กฐ์ ˆํ•˜๋Š” CSS ๊ทธ๋ฆฌ๋“œ ๋ ˆ์ด์•„์›ƒ

๐Ÿšฉ์ง‘์ค‘! flexbox๋ฅผ ์ ์šฉํ•˜๋ ค๋ฉด, ์ ์šฉํ•˜๋ ค๋Š” ์š”์†Œ์— display: flex;๋ฅผ ์ ์šฉ์‹œํ‚จ๋‹ค

โ—‹justify-content

  • ์š”์†Œ์˜ ๊ฐ€๋กœ ์ •๋ ฌ
  • 5๊ฐœ์˜ ๊ฐ’์œผ๋กœ ๊ฐ€๋กœ๋กœ ์ •๋ ฌ ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค
    • flex-start ์š”์†Œ๋“ค์„ ์ปจํ…Œ์ด๋„ˆ์˜ ์™ผ์ชฝ์œผ๋กœ ์ •๋ ฌ.
    • flex-end ์š”์†Œ๋“ค์„ ์ปจํ…Œ์ด๋„ˆ์˜ ์˜ค๋ฅธ์ชฝ์œผ๋กœ ์ •๋ ฌ.
    • center ์š”์†Œ๋“ค์„ ์ปจํ…Œ์ด๋„ˆ์˜ ๊ฐ€์šด๋ฐ๋กœ ์ •๋ ฌ.
    • space-between ์š”์†Œ๋“ค ์‚ฌ์ด์— ๋™์ผํ•œ ๊ฐ„๊ฒฉ์„ ๋‘”๋‹ค.
    • space-around ์š”์†Œ๋“ค ์ฃผ์œ„์— ๋™์ผํ•œ ๊ฐ„๊ฒฉ์„ ๋‘”๋‹ค.
  • ์˜ˆ์‹œ
#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;
}


โ—‹align-items

  • ์š”์†Œ์˜ ์„ธ๋กœ ์ •๋ ฌ
  • 5๊ฐœ์˜ ๊ฐ’์œผ๋กœ ๊ฐ€๋กœ๋กœ ์ •๋ ฌ ์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค
    • flex-start ์š”์†Œ๋“ค์„ ์ปจํ…Œ์ด๋„ˆ์˜ ๊ผญ๋Œ€๊ธฐ๋กœ ์ •๋ ฌ.
    • flex-end ์š”์†Œ๋“ค์„ ์ปจํ…Œ์ด๋„ˆ์˜ ๋ฐ”๋‹ฅ์œผ๋กœ ์ •๋ ฌ.
    • center ์š”์†Œ๋“ค์„ ์ปจํ…Œ์ด๋„ˆ์˜ ์„ธ๋กœ์„  ์ƒ์˜ ๊ฐ€์šด๋ฐ๋กœ ์ •๋ ฌ.
    • baseline ์š”์†Œ๋“ค์„ ์ปจํ…Œ์ด๋„ˆ์˜ ์‹œ์ž‘ ์œ„์น˜์— ์ •๋ ฌ.
    • stretch ์š”์†Œ๋“ค์„ ์ปจํ…Œ์ด๋„ˆ์— ๋งž๋„๋ก ๋Š˜๋ฆฐ๋‹ค.
  • ์˜ˆ์‹œ
#pond {
  display: flex;
  align-items:flex-end;
}

โ—justify-content+align-items

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


โ—‹flex-direction

  • ์š”์†Œ์˜ ์ •๋ ฌ ๋ฐฉํ–ฅ์„ ์ง€์ •
  • 4๊ฐœ์˜ ๊ฐ’์œผ๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค
    • row ์š”์†Œ๋“ค์„ ํ…์ŠคํŠธ์˜ ๋ฐฉํ–ฅ๊ณผ ๋™์ผํ•˜๊ฒŒ ์ •๋ ฌ.
    • row-reverse ์š”์†Œ๋“ค์„ ํ…์ŠคํŠธ์˜ ๋ฐ˜๋Œ€ ๋ฐฉํ–ฅ์œผ๋กœ ์ •๋ ฌ.
    • column ์š”์†Œ๋“ค์„ ์œ„์—์„œ ์•„๋ž˜๋กœ ์ •๋ ฌ.
    • column-reverse ์š”์†Œ๋“ค์„ ์•„๋ž˜์—์„œ ์œ„๋กœ ์ •๋ ฌ.
  • ์˜ˆ์‹œ
#pond {
  display: flex;
  flex-direction:column;
}

โ—flex-direction+justify-content

FROGGY ๋‹จ๊ณ„ 10

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

FROGGY ๋‹จ๊ณ„ 12

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

FROGGY ๋‹จ๊ณ„ 13

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

โ—‹order

  • ๊ฐ ์š”์†Œ์˜ ๊ฐœ๋ณ„ ์ˆœ์„œ ์ ์šฉ
  • order์˜ ๊ธฐ๋ณธ ๊ฐ’์€ 0์ด๋ฉฐ, ์–‘์ˆ˜๋‚˜ ์Œ์ˆ˜๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค
  • ์˜ˆ์‹œ
#pond {
  display: flex;
}

.yellow {
  order: 1;  /* ๋…ธ๋ž€ ๊ฐœ๊ตฌ๋ฆฌ์˜ ์ˆœ์„œ๋ฅผ ๋’ค๋กœ ๋ฐ”๊พผ๋‹ค */ 
}

  • ์˜ˆ์‹œ2
#pond {
  display: flex;
}

.red {
  order: -1;
}

โ—‹align-self

  • ๊ฐœ๋ณ„ ์š”์†Œ์— ์ ์šฉํ•˜๋Š” ์†์„ฑ
  • align-items(์„ธ๋กœ ์ •๋ ฌ)์˜ ๊ฐ’๋“ค๋กœ ์ง€์ •ํ•œ๋‹ค
    • flex-start ์š”์†Œ๋“ค์„ ์ปจํ…Œ์ด๋„ˆ์˜ ๊ผญ๋Œ€๊ธฐ๋กœ ์ •๋ ฌ.
    • flex-end ์š”์†Œ๋“ค์„ ์ปจํ…Œ์ด๋„ˆ์˜ ๋ฐ”๋‹ฅ์œผ๋กœ ์ •๋ ฌ.
    • center ์š”์†Œ๋“ค์„ ์ปจํ…Œ์ด๋„ˆ์˜ ์„ธ๋กœ์„  ์ƒ์˜ ๊ฐ€์šด๋ฐ๋กœ ์ •๋ ฌ.
    • baseline ์š”์†Œ๋“ค์„ ์ปจํ…Œ์ด๋„ˆ์˜ ์‹œ์ž‘ ์œ„์น˜์— ์ •๋ ฌ.
    • stretch ์š”์†Œ๋“ค์„ ์ปจํ…Œ์ด๋„ˆ์— ๋งž๋„๋ก ๋Š˜๋ฆฐ๋‹ค.
  • ์˜ˆ์‹œ
#pond {
  display: flex;
  align-items: flex-start;
}

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

โ—order+align-self

FROGGY ๋‹จ๊ณ„ 17

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

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

โ—‹flex-wrap

  • ์ค„ ๋ฐ”๊ฟˆ
  • 3๊ฐœ์˜ ๊ฐ’์œผ๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค
    • nowrap ๋ชจ๋“  ์š”์†Œ๋“ค์„ ํ•œ ์ค„์— ์ •๋ ฌ.
    • `wrap ์š”์†Œ๋“ค์„ ์—ฌ๋Ÿฌ ์ค„์— ๊ฑธ์ณ ์ •๋ ฌ.
    • `wrap-reverse ์š”์†Œ๋“ค์„ ์—ฌ๋Ÿฌ ์ค„์— ๊ฑธ์ณ ๋ฐ˜๋Œ€๋กœ ์ •๋ ฌ.
  • ์˜ˆ์‹œ
#pond {
  display: flex;
  flex-wrap: wrap;
}

โ—flex-direction+flex-wrap

FROGGY ๋‹จ๊ณ„ 19

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

โ—‹flex-flow

  • flex-direction+flex-wrap
  • ์˜ˆ์‹œ
#pond {
  display: flex;
  flex-flow: column wrap;
}

โ—‹align-content

  • ์—ฌ๋Ÿฌ ์ค„ ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์„ ์ง€์ •
  • 5๊ฐœ์˜ ๊ฐ’์œผ๋กœ ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋‹ค
    • flex-start ์—ฌ๋Ÿฌ ์ค„๋“ค์„ ์ปจํ…Œ์ด๋„ˆ์˜ ๊ผญ๋Œ€๊ธฐ์— ์ •๋ ฌ.
    • flex-end ์—ฌ๋Ÿฌ ์ค„๋“ค์„ ์ปจํ…Œ์ด๋„ˆ์˜ ๋ฐ”๋‹ฅ์— ์ •๋ ฌ.
    • center ์—ฌ๋Ÿฌ ์ค„๋“ค์„ ์„ธ๋กœ์„  ์ƒ์˜ ๊ฐ€์šด๋ฐ์— ์ •๋ ฌ.
    • space-between ์—ฌ๋Ÿฌ ์ค„๋“ค ์‚ฌ์ด์— ๋™์ผํ•œ ๊ฐ„๊ฒฉ์„ ๋‘”๋‹ค.
    • space-around ์—ฌ๋Ÿฌ ์ค„๋“ค ์ฃผ์œ„์— ๋™์ผํ•œ ๊ฐ„๊ฒฉ์„ ๋‘”๋‹ค.
    • stretch ์—ฌ๋Ÿฌ ์ค„๋“ค์„ ์ปจํ…Œ์ด๋„ˆ์— ๋งž๋„๋ก ๋Š˜๋ฆฐ๋‹ค.
  • ๐Ÿšฉ์ง‘์ค‘! align-content๋Š” ์—ฌ๋Ÿฌ ์ค„๋“ค ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์„ ์ง€์ •ํ•˜๋ฉฐ, align-items๋Š” ์ปจํ…Œ์ด๋„ˆ ์•ˆ์—์„œ ์–ด๋–ป๊ฒŒ ๋ชจ๋“  ์š”์†Œ๋“ค์ด ์ •๋ ฌํ•˜๋Š”์ง€๋ฅผ ์ง€์ •ํ•œ๋‹ค.
  • ํ•œ ์ค„๋งŒ ์žˆ๋Š” ๊ฒฝ์šฐ, align-content๋Š” ํšจ๊ณผ๋ฅผ ๋ณด์ด์ง€ ์•Š๋Š”๋‹ค
  • ์˜ˆ์‹œ
#pond {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
}

โ—flex-direction+align-content

FROGGY ๋‹จ๊ณ„ 23

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

โ—FROGGY ๋‹จ๊ณ„ 24

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


โœ… ๋ชฉํ‘œ!

  • justify-content ๊ฐ€๋กœ โ†” align-items ์„ธ๋กœ
  • flex-direction ๋ฐฉํ–ฅ ์ง€์ •
  • ์š”์†Œ์˜ ๊ฐœ๋ณ„ ์†์„ฑ
    • order ๊ธฐ๋ณธ ๊ฐ’์€ 0์ด๋ฉฐ, ์–‘์ˆ˜๋‚˜ ์Œ์ˆ˜๋กœ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋‹ค
    • align-self align-items(์„ธ๋กœ ์ •๋ ฌ)์˜ ๊ฐ’๋“ค๋กœ ์ง€์ •
  • flex-wrap ์ค„ ๋ฐ”๊ฟˆ
  • flex-flow flex-direction+flex-wrap
  • align-content ์—ฌ๋Ÿฌ ์ค„ ์‚ฌ์ด์˜ ๊ฐ„๊ฒฉ์„ ์ง€์ •

MDN_Flexbox
FLEXBOX FROGGY๐Ÿธ

profile
๐Ÿš€ ๋‚ด๊ฐ€ ๋ณด๋ ค๊ณ  ์“ฐ๋Š” ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ

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