Session 1_3. Flex

minj9_6ยท2021๋…„ 8์›” 19์ผ
0

TIL, WeCode, Courseย 

๋ชฉ๋ก ๋ณด๊ธฐ
12/48
post-thumbnail

*๐Ÿ”Study Keyword :

CSS์˜ ๐Ÿ”‘flex ์†์„ฑ์— ๋Œ€ํ•ด ๋งˆ์Šคํ„ฐํ•˜์ž

  • Q. Flex๋ฅผ ์™œ ๋ฐฐ์›Œ์•ผํ•˜์ฅฌ๐Ÿ™‹โ€โ™‚๏ธ?

A.Flex๋Š” ๋ ˆ์ด์•„์›ƒ์˜ ์‹œ์ž‘์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.๐Ÿ™†โ€โ™‚๏ธ
- semantic ํƒœ๊ทธ๋กœ ์ด๋ฃจ์–ด์ง„ ์œ„ ์ด๋ฏธ์ง€๋ฅผ ๋ฌธ์„œ์˜ ๊ตฌ์กฐ๋ผ๋Š” html์˜ ์‹œ๊ฐ๋ณด๋‹จ
์ด๋Ÿฌํ•œ ํ˜•ํƒœ๋ฅผ ์–ด๋–ป๊ฒŒ CSS๋กœ ๊ตฌํ˜„ํ• ์ง€์˜ ๊ด€์ ์—์„œ ์ƒ๊ฐํ•ด๋ด์•ผํ•œ๋‹ค.

  • ์ด๋ ‡๊ฒŒ ํฐ ๋ ˆ์ด์•„์›ƒ์„ ์งค ๋•Œ ๊ธฐ๋ณธ์ ์œผ๋กœ flex๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.
    ๋˜ํ•œ ์œ„ ์ด๋ฏธ์น˜์ฒ˜๋Ÿผ ๊ฐ๊ฐ์˜ ๋ธ”๋Ÿญ์„ ์„ธ๋ฐ€ํ•˜๊ฒŒ ๊ตฌํ˜„ํ•˜๋Š”๋ฐ ์žˆ์–ด์„œ๋„ flex๊ฐ€ ์‚ฌ์šฉ๋œ๋‹ค.
  • ์ฆ‰ ํฐ ๋ ˆ์ด์•„์›ƒ๋ถ€ํ„ฐ ์ž‘์€ ๋ ˆ์ด์•„์›ƒ์„ ์งค ๋•Œ ๋ชจ๋‘ flex๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

Flexbox ๊ฐ€์ด๋“œ

  • flex ์šฉ์–ด


๋ฉ”์ธ ์ถ•(main axis) : ์•„์ดํ…œ๋“ค์ด ๋ฐฐ์น˜๋œ ๋ฐฉํ–ฅ์˜ ์ถ• = (์˜ค๋Ž…๊ผฌ์น˜๐Ÿข๋ผ๊ณ  ์ƒ๊ฐํ•˜์ž)
main start|main-end: ๋ฉ”์ธ ์ถ•์˜ ์‹œ์ž‘์ ๊ณผ ๋์ 
main size: ๋ฉ”์ธ ์ถ•์˜ ์ „์ฒด ํฌ๊ธฐ
์ˆ˜์ง ์ถ•(cross axis) : ๋ฉ”์ธ ์ถ•๊ณผ ์ˆ˜์ง์ธ ์ถ•
cross size: ์ˆ˜์ง ์ถ•์˜ ์ „์ฒด ํฌ๊ธฐ
=> ์˜ค๋Ž…๐Ÿข๋“ค(flex items)์ด ๊ผฌ์น˜(๋ฉ”์ธ ์ถ•)๋ฅผ ๋”ฐ๋ผ ์ญ‰ ๊ฝƒํ˜€์„œ ์ •๋ ฌ๋œ ์ƒํƒœ๋ผ๊ณ  ์ƒ์ƒํ•˜์ž

  • ๋ถ€๋ชจ ์š”์†Œ(flex container)์™€ ์ž์‹ ์š”์†Œ(flex item)๊ฐ€ ์ง€๋‹Œ ๊ฐ๊ฐ์˜ ์†์„ฑ๋“ค์— ์ง‘์ค‘ํ•˜์ž

=> Flex ์†์„ฑ์€ ํฌ๊ฒŒ 2๊ฐ€์ง€๋กœ ๋‚˜๋ˆ ์ง„๋‹ค.
-1.์ฝ˜ํ…Œ์ด๋„ˆ(๋ถ€๋ชจ์š”์†Œ)์— ์ ์šฉ๋˜๋Š” ์†์„ฑ
-2.์•„์ดํ…œ(์ž์‹์š”์†Œ)์— ์ ์šฉ๋˜๋Š” ์†์„ฑ

  1. Flex ์ปจํ…Œ์ด๋„ˆ์— ์ ์šฉ๋˜๋Š” ์†์„ฑ
  • display:flex
  • Flex ์ปจํ…Œ์ด๋„ˆ์— display:flex๋ฅผ ์ ์šฉํ•˜๋Š” ๊ฒƒ์„ ์‹œ์ž‘์œผ๋กœ Flex ์•„์ดํ…œ๋“ค์ด ๊ฐ€๋กœ ๋ฐฉํ–ฅ์œผ๋กœ ๋ฐฐ์น˜๋œ๋‹ค.
  • ๋ฐฐ์น˜๋˜๋ฉฐ ์•„์ดํ…œ์ด ๊ฐ€์ง„ ์ฝ˜ํ…์ธ ์˜ ๊ฐ€๋กœ ํฌ๊ธฐ๋งŒํผ๋งŒ ์ฐจ์ง€ํ•˜๊ฒŒ๋˜๊ณ (๋งˆ์น˜ inline ์š”์†Œ์ฒ˜๋Ÿผ) ์„ธ๋กœ๋Š” ์ปจํ…Œ์ด๋„ˆ์˜ ๋†’์ด ๋งŒํผ ๋Š˜์–ด๋‚œ๋‹ค.
    ์ฐธ๊ณ ๐Ÿ’ก> inline-flex๋Š” ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ์ฃผ๋ณ€ ์š”์†Œ๋“ค๊ณผ ์–ด๋–ป๊ฒŒ ์–ด์šฐ๋Ÿฌ์งˆ์ง€ ๊ฒฐ์ •ํ•˜๋Š” ๊ฐ’์œผ๋กœ inline block์ฒ˜๋Ÿผ ๋™์ž‘ํ•œ๋‹ค.
  • flex direction (๋ฐฐ์น˜ ๋ฐฉํ–ฅ ์„ค์ •)
    ์˜ค๋Ž…๐Ÿข๊ผฌ์น˜(main-axis)์˜ ๋ฐฉํ–ฅ์„ ๊ฐ€๋กœ๋กœ ํ• ๊ฑฐ๋ƒ ์„ธ๋กœ๋กœ ํ• ๊ฑฐ๋ƒ๋ฅผ ์ •ํ•ด์ค€๋‹ค.
  • ์•„์ดํ…œ๋“ค์ด ๋ฐฐ์น˜๋˜๋Š” ์ถ•์˜ ๋ฐฉํ–ฅ์„ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ์ด๋‹ค.
  • ์†์„ฑ ๊ฐ’๋“ค :
    row, ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ํ–‰ ๋ฐฉํ–ฅ ๋ฐฐ์น˜
    row-reverse, ์•„์ดํ…œ๋“ค ์—ญ์ˆœ์œผ๋กœ ํ–‰ ๋ฐฐ์น˜
    column, ์•„์ดํ…œ๋“ค์ด ์—ด ๋ฐฉํ–ฅ์œผ๋กœ ๋ฐฐ์น˜.
    column-reverse, ์•„์ดํ…œ๋“ค์ด ์—ญ์ˆœ์œผ๋กœ ์„ธ๋กœ ๋ฐฐ์น˜ ๋ฉ๋‹ˆ๋‹ค.
  • TIP๐Ÿ‘‰)๋ฐ˜์‘ํ˜• ๊ตฌํ˜„์‹œ
    flex-directon ์†์„ฑ์„ ์‚ฌ์šฉํ•ด ๊ธฐ๋ณธ๊ฐ’์ธ row์—์„œ ์ž‘์€ ๋ชจ๋ฐ”์ผ ๊ธฐ๊ธฐ ์ •๋„์˜ ํญ์œผ๋กœ ๋ฐ”๋€Œ๊ฒŒ ๋˜๋ฉด ์†์„ฑ๊ฐ’์„ column์œผ๋กœ ๋ฐ”๊พธ์–ด ๋งˆ์น˜ ๋ฉ”๋‰ด Bar๊ฐ€ ์•„๋ž˜๋กœ ๋‚ด๋ ค์˜ค๋Š” ๋Š๋‚Œ์˜ ๋ฐ˜์‘ํ˜• ๋ ˆ์ด์•„์›ƒ ๊ตฌํ˜„ํ•  ์ˆ˜๋„!
  • flex-wrap (์ค„๋„˜๊น€ ์ฒ˜๋ฆฌ ์„ค์ •)
  • ์ปจํ…Œ์ด๋„ˆ๊ฐ€ ์•„์ดํ…œ๋“ค์„ ๋‹ด์„ ์—ฌ์œ  ๊ณต๊ฐ„์ด ์—†์„๋•Œ ์ค„๋ฐ”๊ฟˆ์„ ์–ด๋–ป๊ฒŒ ํ• ์ง€ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ
    nowrap, ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์ค„๋ฐ”๊ฟˆ X ๋„˜์น˜๋ฉด ์•„์ดํ…œ์ด ๋น ์ ธ๋‚˜๊ฐ„๋‹ค.
    wrap, ์ค„๋ฐ”๊ฟˆ์„ํ•˜๊ณ  float์ด๋‚˜ inline-block์œผ๋กœ ๋ฐฐ์น˜ํ•œ ์š”์†Œ์™€ ์œ ์‚ฌํ•˜๊ฒŒ ๋™์ž‘
    wrap-reverse, ์•„์ดํ…œ๋“ค์˜ ์—ญ์ˆœ์œผ๋กœ ์ค„๋ฐ”๊ฟˆ
  • flex-flow
  • flex-direction๊ณผ flex-wrap์„ ํ•œ๊บผ๋ฒˆ์— ์ง€์ •ํ•  ์ˆ˜ ์žˆ๋Š” ๋‹จ์ถ• ์†์„ฑ
  • flex-direction, flex-wrap์˜ ์ˆœ์œผ๋กœ ์ž‘์„ฑ EX> .container{flex-flow: row wrap};

์ •๋ ฌ๊ณผ ๊ด€๋ จ๋œ ์†์„ฑ

1>justify-content๋Š” ๋ฉ”์ธ์ถ•(์˜ค๋Ž…๊ผฌ์น˜) ๋ฐฉํ–ฅ์œผ๋กœ ์ •๋ ฌ
2>align-items์€ ์ˆ˜์ง์ถ•(์˜ค๋Ž…์„ ๋œฏ์–ด๋‚ด๋Š”) ๋ฐฉํ–ฅ์œผ๋กœ ์ •๋ ฌ

  • 1>justify-content(๋ฉ”์ธ์ถ• ๋ฐฉํ–ฅ ์ •๋ ฌ)
  • justify๋Š” ๋ฉ”์ธ์ถ• ๋ฐฉํ–ฅ์œผ๋กœ ์•„์ดํ…œ์„๋“ค ์ •๋ ฌํ•˜๋Š” ์†์„ฑ์ด๋‹ค
    flex-start (๊ธฐ๋ณธ๊ฐ’), ์•„์ดํ…œ๋“ค์„ ์‹œ์ž‘์ ์œผ๋กœ ์ •๋ ฌํ•˜๋Š”๋ฐ flex-direction์ด row(๊ฐ€๋กœ ๋ฐฐ์น˜)์ผ ๋•Œ๋Š” ์™ผ์ชฝ, column(์„ธ๋กœ ๋ฐฐ์น˜)์ผ ๋•Œ๋Š” ์œ„๊ฐ€ ์‹œ์ž‘์ 
    flex-end, ์•„์ดํ…œ๋“ค์„ ๋์ ์œผ๋กœ ์ •๋ ฌํ•˜๋Š”๋ฐ
    flex-direction์ด row(๊ฐ€๋กœ ๋ฐฐ์น˜)์ผ ๋•Œ๋Š” ์˜ค๋ฅธ์ชฝ, column(์„ธ๋กœ ๋ฐฐ์น˜)์ผ ๋•Œ๋Š” ์•„๋ž˜๊ฐ€ ๋์ 
    center, ์•„์ดํ…œ๋“ค์„ ๊ฐ€์šด๋ฐ๋กœ ์ •๋ ฌ
    space-between, ์•„์ดํ…œ๋“ค์˜ โ€œ์‚ฌ์ด(between)โ€์— ๊ท ์ผํ•œ ๊ฐ„๊ฒฉ์„ ๋งŒ๋“ค์–ด ์คŒ์œผ๋กœ์„œ ์–‘์ชฝ ์•„์ดํ…œ์€ ์‹œ์ž‘์ ๊ณผ ๋์ ์— ๋ถ™๋Š”๋‹ค
    space-around, ์•„์ดํ…œ๋“ค์˜ โ€œ๋‘˜๋ ˆ(around)โ€์— ๊ท ์ผํ•œ ๊ฐ„๊ฒฉ์„ ๋งŒ๋“ค์–ด ์คŒ
    space-evenly, ์•„์ดํ…œ๋“ค์˜ ์‚ฌ์ด, ์–‘ ๋๊นŒ์ง€ ๋ชจ๋‘ ๊ท ์ผํ•œ ๊ฐ„๊ฒฉ์„ ๋งŒ๋“ค์–ด ์คŒ
  • 2>align-items(์ˆ˜์ง์ถ• ๋ฐฉํ–ฅ ์ •๋ ฌ)
  • align-items๋Š” ์ˆ˜์ง์ถ• ๋ฐฉํ–ฅ์œผ๋กœ ์•„์ดํ…œ์„ ์ •๋ ฌํ•˜๋Š” ์†์„ฑ์œผ๋กœ justify-content์™€ ์ˆ˜์ง ๋ฐฉํ–ฅ์˜ ์ •๋ ฌ์ด๋‹ค.
    stretch (๊ธฐ๋ณธ๊ฐ’), ์•„์ดํ…œ๋“ค์ด ์ˆ˜์ง์ถ• ๋ฐฉํ–ฅ์œผ๋กœ ๋๊นŒ์ง€ ๋Š˜์–ด๋‚จ
    flex-start, ์•„์ดํ…œ๋“ค์„ ์‹œ์ž‘์ ์œผ๋กœ ์ •๋ ฌํ•ด
    flex-direction์ด row(๊ฐ€๋กœ ๋ฐฐ์น˜)์ผ ๋•Œ๋Š” ์œ„, column(์„ธ๋กœ ๋ฐฐ์น˜)์ผ ๋•Œ๋Š” ์™ผ์ชฝ์ด ์‹œ์ž‘์ 
    flex-end, ์•„์ดํ…œ๋“ค์„ ๋์œผ๋กœ ์ •๋ ฌํ•ด
    flex-direction์ด row(๊ฐ€๋กœ ๋ฐฐ์น˜)์ผ ๋•Œ๋Š” ์•„๋ž˜, column(์„ธ๋กœ ๋ฐฐ์น˜)์ผ ๋•Œ๋Š” ์˜ค๋ฅธ์ชฝ์ด ๋์ 
    center, ์•„์ดํ…œ๋“ค์„ ๊ฐ€์šด๋ฐ๋กœ ์ •๋ ฌ
    baseline, ์•„์ดํ…œ๋“ค์„ ํ…์ŠคํŠธ ๋ฒ ์ด์Šค๋ผ์ธ ๊ธฐ์ค€์œผ๋กœ ์ •๋ ฌ
    TIP๐Ÿ’ก)justify-content: center;,
    align-item: center;
    ๋ฅผ ์ฃผ๋ฉด ๋ถ€๋ชจ ์š”์†Œ ์•ˆ์— ์žˆ๋Š” ์•„์ดํ…œ์„ ํ•œ ๊ฐ€์šด๋ฐ ๋ฐฐ์น˜๊ฐ€๋Šฅ!!
  • 3>align-content (์—ฌ๋Ÿฌ ํ–‰ ์ •๋ ฌ)
  • flex-wrap: wrap;์ด ์„ค์ •๋œ ์ƒํƒœ์—์„œ, ์•„์ดํ…œ๋“ค์˜ ํ–‰์ด 2์ค„ ์ด์ƒ ๋˜์—ˆ์„ ๋•Œ์˜ ์ˆ˜์ง์ถ• ๋ฐฉํ–ฅ ์ •๋ ฌ์„ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ
    justify-content์˜ ์†์„ฑ๊ฐ’๊ณผ ๋™์ผ

  1. ์•„์ดํ…œ(์ž์‹์š”์†Œ)์— ์ ์šฉ๋˜๋Š” ์†์„ฑ
  • flex-basis (์œ ์—ฐํ•œ ๋ฐ•์Šค์˜ ๊ธฐ๋ณธ ์˜์—ญ)
  • flex-basis๋Š” Flex ์•„์ดํ…œ์˜ ๊ธฐ๋ณธ ํฌ๊ธฐ๋ฅผ ์„ค์ •(flex-direction์ด row์ผ ๋•Œ๋Š” ๋„ˆ๋น„, column์ผ ๋•Œ๋Š” ๋†’์ด)
    • flex-basis์˜ ๊ฐ’์œผ๋กœ width, height ๋“ฑ์˜ ๊ฐ์ข… ๋‹จ์œ„์˜ ์ˆ˜๊ฐ€ ๋“ค์–ด๊ฐ€๋ฉฐ, ๊ธฐ๋ณธ๊ฐ’์€ auto๋กœ ํ•ด๋‹น ์•„์ดํ…œ์˜ width ๊ฐ’์œผ๋กœ width๋ฅผ ๋”ฐ๋กœ ์„ค์ •ํ•˜์ง€ ์•Š์œผ๋ฉด ์ปจํ…์ธ ์˜ ํฌ๊ธฐ์ด๋‹ค.
    • flex-basis๋ฅผ ํ†ตํ•ด ์•„์ดํ…œ์˜ ๊ธฐ๋ณธ ์ ์œ  ํฌ๊ธฐ๋ฅผ ์„ค์ •.
  • flex-grow (์œ ์—ฐํ•˜๊ฒŒ ๋Š˜๋ฆฌ๊ธฐ)
  • flex-grow๋Š” ์•„์ดํ…œ์ด flex-basis์˜ ๊ฐ’๋ณด๋‹ค ์ปค์งˆ ์ˆ˜ ์žˆ๋Š”์ง€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ
    • flex-grow์—๋Š” ์ˆซ์ž๊ฐ’์ด ๋“ค์–ด๊ฐ€๊ณ  0๋ณด๋‹ค ํฐ ๊ฐ’์ด ์„ธํŒ…์ด ๋˜๋ฉด ํ•ด๋‹น ์•„์ดํ…œ์ด ์œ ์—ฐํ•œ(Flexible) ๋ฐ•์Šค๋กœ ๋ณ€ํ•˜๊ณ  ์›๋ž˜์˜ ํฌ๊ธฐ๋ณด๋‹ค ์ปค์ง€๋ฉฐ ๋นˆ ๊ณต๊ฐ„์„ ๋ฉ”์›€.
    • flex-grow์— ๋“ค์–ด๊ฐ€๋Š” ์ˆซ์ž์˜ ์˜๋ฏธ๋Š”, ์•„์ดํ…œ๋“ค์˜ flex-basis๋ฅผ ์ œ์™ธํ•œ ์—ฌ๋ฐฑ(๋นˆ ๊ณต๊ฐ„) ๋ถ€๋ถ„์„ flex-grow์— ์ง€์ •๋œ ์ˆซ์ž์˜ ๋น„์œจ๋กœ ๋‚˜๋ˆ„์–ด ๊ฐ€์ง์„ ์˜๋ฏธํ•œ๋‹ค.
    • ๊ธฐ๋ณธ๊ฐ’์ด 0์ด๊ธฐ ๋•Œ๋ฌธ์—, ๋”ฐ๋กœ ์ ์šฉํ•˜๊ธฐ ์ „๊นŒ์ง€๋Š” ์•„์ดํ…œ์ด ๋Š˜์–ด๋‚˜์ง€ ์•Š์•˜๋‹ค.
  • flex-shrink (์œ ์—ฐํ•˜๊ฒŒ ์ค„์ด๊ธฐ)
  • flex-shrink๋Š” flex-grow์™€ ์Œ์„ ์ด๋ฃจ๋Š” ์†์„ฑ์œผ๋กœ, ์•„์ดํ…œ์ด flex-basis์˜ ๊ฐ’๋ณด๋‹ค ์ž‘์•„์งˆ ์ˆ˜ ์žˆ๋Š”์ง€๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ.
    • flex-shrink์—๋„ ์—ญ์‹œ ์ˆซ์ž๊ฐ’์ด ๋“ค์–ด๊ฐ€๊ณ  ๋ช‡์ด๋“  ์ผ๋‹จ 0๋ณด๋‹ค ํฐ ๊ฐ’์ด ์„ธํŒ… ๋˜๋ฉด ํ•ด๋‹น ์•„์ดํ…œ์ด ์œ ์—ฐํ•œ(Flexible) ๋ฐ•์Šค๋กœ ๋ณ€ํ•˜๊ณ  flex-basis๋ณด๋‹ค ์ž‘์•„์ง„๋‹ค.
    • ๊ธฐ๋ณธ๊ฐ’์ด 1์ด๊ธฐ ๋•Œ๋ฌธ์— ์„ธํŒ…ํ•˜์ง€ ์•Š์•„๋„ ์•„์ดํ…œ์ด flex-basis๋ณด๋‹ค ์ž‘์•„์งˆ ์ˆ˜ ์žˆ์—ˆ๋‹ค.
    • flex-shrink๋ฅผ 0์œผ๋กœ ์„ธํŒ…ํ•˜๋ฉด ์•„์ดํ…œ์˜ ํฌ๊ธฐ๊ฐ€ flex-basis๋ณด๋‹ค ์ž‘์•„์ง€์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๊ณ ์ • ํฌ๊ธฐ๋ฅผ width๋กœ ์„ค์ •ํ•˜๋ฉด ๊ณ ์ •ํญ์˜ ์ปฌ๋Ÿผ์„ ๋งŒ๋“ ๋‹ค.
      -์ปจํ…Œ์ด๋„ˆ์˜ ๊ณ ์ • ํฌ๊ธฐ๊ฐ€ width 100%์ผ ๋•Œ -์ปจํ…Œ์ด๋„ˆ์˜ ๊ณ ์ • ํฌ๊ธฐ๊ฐ€ width 250px์ผ ๋•Œ flex-shrink๊ฐ’์ด 0์ธ ์•„์ดํ…œ์˜ ํฌ๊ธฐ๋Š” ์ค„์–ด๋“ค์ง€ ์•Š๋Š”๋‹ค.
  • flex
  • flex-grow, flex-shrink, flex-basis๋ฅผ ํ•œ ๋ฒˆ์— ์“ธ ์ˆ˜ ์žˆ๋Š” ์ถ•์•ฝํ˜• ์†์„ฑ์ด๋‹ค.
    • ์„ธ ์†์„ฑ๋“ค์€ ์„œ๋กœ ๊ด€๋ จ์ด ๊นŠ๊ธฐ ๋•Œ๋ฌธ์—, ์ด ์ถ•์•ฝํ˜•์„ ์“ฐ๋Š” ํŽธ์ด ์—ฌ๋Ÿฌ๋ชจ๋กœ ํŽธ๋ฆฌํ•˜๋‹ค.
    • ์ฃผ์˜ํ•  ์ ๐Ÿ“›) flex: 1;์ฒ˜๋Ÿผflex-basis๋ฅผ ์ƒ๋žตํ•ด์„œ ์“ฐ๋ฉด flex-basis์˜ ๊ฐ’์€ 0์ด ๋ผ๋Š” ์ ์— ์ฃผ์˜!
<style>
.item {
	flex: 1;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
	flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
	flex: 1 500px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}
</style>
  • flex-basis: 0; ์œผ๋กœ, ๊ธฐ๋ณธ ์ ์œ  ํฌ๊ธฐ๋ฅผ 0์œผ๋กœ ๋งŒ๋“ค๋ฉด ๊ฒฐ๊ตญ ์ „์ฒด ํฌ๊ธฐ๋ฅผ flex-grow์™€ flex-shrink๋กœ ์„ค์ •ํ•œ ๋น„์œจ๋กœ ๋‚˜๋ˆ„์–ด ๊ฐ€์ ธ ์˜์—ญ ์ž์ฒด์˜ ํฌ๊ธฐ๋ฅผ ์„ค์ •ํ•œ ๋น„์œจ๋กœ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.
<style>
.item {
	flex: 1 1 0; // ์ „์ฒด ์•„์ดํ…œ์˜ ์—ฌ๋ฐฑ ๋น„์œจ 1
}
.item:nth-child(2) {
	flex: 2 1 0; // 2๋ฒˆ์งธ ์•„์ดํ…œ์˜ ์—ฌ๋ฐฑ ๋น„์œจ๋งŒ 2
}
</style>

  • ์—ฌ๋ฐฑ์˜ ๋น„๊ฐ€ ์•„๋‹Œ, ์˜์—ญ ์ž์ฒด๋ฅผ ์›ํ•˜๋Š” ๋น„์œจ๋กœ ๋ถ„ํ• ํ•œ๋‹ค๋ฉด flex-basis์„ 0์œผ๋กœ ํ•˜์—ฌ ์ฒ˜๋ฆฌํ•  ์ˆ˜ ์žˆ๋‹ค.
  • flex-wrap๊ณผ flex-basis๋ฅผ ์ด์šฉํ•ด์„œ N๋‹จ ์ปฌ๋Ÿผ์˜ ์‚ฌ๊ฐํ˜• ๋ชฉ๋ก์„ ๋งŒ๋“ค ์ˆ˜๋„ ์žˆ๋‹ค.
<style>
.container {
	display: flex;
	flex-wrap: wrap;
}
</style>

- .item {flex: 1 1 40%;}, ์•„์ดํ…œ์˜ flex-basis ํฌ๊ธฐ๊ฐ€ 40%์ผ ๋• 100%์•ˆ์— ์•„์ดํ…œ์ด 2๊ฐœ ๋“ค์–ด๊ฐ„ 2๋‹จ ์ปฌ๋Ÿผ ์ƒ์„ฑ

  • .item {flex: 1 1 30%;}, ์•„์ดํ…œ์˜ flex-basis ํฌ๊ธฐ๊ฐ€ 30%์ผ ๋• 100%์•ˆ์— ์•„์ดํ…œ์ด 3๊ฐœ ๋“ค์–ด๊ฐ„ 3๋‹จ ์ปฌ๋Ÿผ ์ƒ์„ฑ
  • align-self (์ˆ˜์ง์ถ•์œผ๋กœ ์•„์ดํ…œ ์ •๋ ฌ)
  • align-items์˜ ์•„์ดํ…œ ๋ฒ„์ „์œผ๋กœ align-items๊ฐ€ ์ „์ฒด ์•„์ดํ…œ์˜ ์ˆ˜์ง์ถ• ๋ฐฉํ–ฅ ์ •๋ ฌ์ด๋ผ๋ฉด, align-self๋Š” ํ•ด๋‹น ์•„์ดํ…œ์˜ ์ˆ˜์ง์ถ• ๋ฐฉํ–ฅ ์ •๋ ฌ์„ ์„ค์ •.
    • ๊ธฐ๋ณธ๊ฐ’์€ auto๋กœ, ๊ธฐ๋ณธ์ ์œผ๋กœ align-items ์„ค์ •์„ ์ƒ์† ๋ฐ›์•„ auto์™ธ์˜ ๋‚˜๋จธ์ง€ ๊ฐ’๋“ค์€ align-items์™€ ๋™์ผํ•˜๋‹ค.
    • align-self๋Š” align-items๋ณด๋‹ค ์šฐ์„ ๊ถŒ์ด ์žˆ์–ด ์ „์ฒด ์„ค์ •๋ณด๋‹ค ๊ฐ๊ฐ์˜ ๊ฐœ๋ณ„ ์„ค์ •์ด ์šฐ์„ ์‹œํ•œ๋‹ค.
  • order (๋ฐฐ์น˜ ์ˆœ์„œ)
  • ๊ฐ ์•„์ดํ…œ๋“ค์˜ ์‹œ๊ฐ์  ๋‚˜์—ด ์ˆœ์„œ๋ฅผ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ์œผ๋กœ ์ˆซ์ž๊ฐ’์ด ๋“ค์–ด๊ฐ€๋ฉฐ, ์ž‘์€ ์ˆซ์ž์ผ ์ˆ˜๋ก ๋จผ์ € ๋ฐฐ์น˜๋œ๋‹ค.
    • ์‹œ๊ฐ์ ์ธ ์ˆœ์„œ์ผ ๋ฟ, HTML ์ž์ฒด์˜ ๊ตฌ์กฐ๋ฅผ ๋ฐ”๊พธ๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์ ‘๊ทผ์„ฑ ์ธก๋ฉด์—์„œ ์‚ฌ์šฉ์— ์ฃผ์˜ํ•ด์•ผํ•œ๋‹ค.
    • ์ ‘๊ทผ์„ฑ ์ธก๋ฉด ์ฃผ์˜ ๐Ÿ“›) ์‹œ๊ฐ ์žฅ์• ์ธ๋ถ„๋“ค๊ป˜์„œ ์‚ฌ์šฉํ•˜๋Š” ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๋กœ ํ™”๋ฉด์„ ์ฝ์„ ๋•Œ, order๋ฅผ ์ด์šฉํ•ด ์ˆœ์„œ๋ฅผ ๋ฐ”๊พผ ๊ฒƒ์€ ์˜๋ฏธ๊ฐ€ ์—†์Œ์„ ์ธ์ง€!
  • z-index
  • z-index๋กœ Z์ถ• ์ •๋ ฌํ•˜๋Š” ์†์„ฑ์œผ๋กœ ์ˆซ์ž๊ฐ€ ํด ์ˆ˜๋ก ์œ„๋กœ ์˜ฌ๋ผ์˜จ๋‹ค.
  • z-index๋ฅผ ์„ค์ • ์•ˆํ•˜๋ฉด 0์œผ๋กœ 1๋งŒ ์„ค์ •ํ•ด๋„ ๋‚˜๋จธ์ง€ ์•„์ดํ…œ์„ ๋ณด๋‹ค ์œ„๋กœ ์˜ฌ๋ผ์˜จ๋‹ค.

*๐Ÿ’กconclusion

  • ์›น ํŽ˜์ด์ง€์˜ ๋ ˆ์ด์•„์›ƒ์„ ๋งŒ๋“ค ๋•Œ display: flex ์†์„ฑ์„ ์‚ฌ์šฉํ•œ๋‹ค.
  • justify-content, align-item ์†์„ฑ์„ ์‚ฌ์šฉํ•ด ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ•œ๋‹ค.

#๐Ÿ“‘Study Source

profile
์ž๊ธฐ ์‹ ๋ขฐ์˜ ํž˜์„ ๋ฏฟ๊ณ  ์‹ค์ฒœํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๊ณ ์žํ•ฉ๋‹ˆ๋‹ค.

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