์˜ค๋Š˜์€ CSS์—์„œ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๋Š” ์†์„ฑ์ธ flex!
TIL์„ ๊ธฐ๋กํ•˜์ง€๋„ ์•Š๋˜ ๋‚˜์—๊ฒŒ flex ์†์„ฑ์„ ๋‚˜ ์Šค์Šค๋กœ ์ •๋ฆฌํ•  ๋‚ ์ด ์˜ฌ ์ค„์ด์•ผ..!
์˜ค๋Š˜ ํ™•์‹คํžˆ ์ •๋ฆฌํ•˜๊ณ  ์ดํ•ดํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค! ๐Ÿ”ฅ

Flex๋ž€? ๐Ÿค”

flex๋Š” '์œ ๋™์ ์ธ'์ด๋ผ๋Š” ๋œป์˜ flexible์—์„œ ๋‚˜์˜จ ์†์„ฑ๋ช…์ด๋‹ค.
๋ง๊ทธ๋Œ€๋กœ ์ƒํ™ฉ(๋ทฐํฌํŠธ์˜ ๊ฐ์†Œ ๋“ฑ)์— ๋”ฐ๋ผ ์œ ๋™์ ์œผ๋กœ ์š”์†Œ์˜ ์„ฑ์งˆ์ด ๋ฐ”๋€Œ๋Š” ์†์„ฑ์ด๋‹ค.

MDN ๊ณต์‹๋ฌธ์„œ์˜ flex์†์„ฑ์˜ ์„ค๋ช…์„ ๋ณด๋ฉด ์•„๋ž˜์ฒ˜๋Ÿผ ๋‚˜์™€์žˆ๋‹ค.

The element behaves like a block element and lays out its content according to the flexbox model.
ํ•ด๋‹น ์š”์†Œ๋Š” ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์ฒ˜๋Ÿผ ํ–‰๋™ํ•˜๋ฉฐ flexbox model์— ๋”ฐ๋ผ ์ฝ˜ํ…์ธ ๋ฅผ ๋ฐฐ์น˜ํ•œ๋‹ค.

์—ฌ๊ธฐ์„œ ์šฐ๋ฆฌ๋Š” flexbox model์ด๋ž€ ๊ฒƒ์„ ์•Œ์•„์•ผํ•œ๋‹ค.

CSS Flexible Box Layout์€ ์‚ฌ์šฉ์ž ์ธํ„ฐํŽ˜์ด์Šค ๋””์ž์ธ๊ณผ ๋‹จ๋ฐฉํ–ฅ ๋ ˆ์ด์•„์›ƒ์— ์ตœ์ ํ™”๋œ CSS ๋ชจ๋“ˆ

์ฆ‰ ํ•œ ๋ฐฉํ–ฅ(ํ–‰์ด๋‚˜ ์—ด)์œผ๋กœ ์ •๋ ฌํ•˜๋Š” ๊ฒƒ์— ํŠนํ™”๋œ ์†์„ฑ์ด๋ผ๊ณ  ํ•œ๋‹ค.
flex๊ฐ€ ์ ์šฉ๋œ ๋ถ€๋ชจ ์š”์†Œ(์ปจํ…Œ์ด๋„ˆ)๋Š” ์ž์‹ ์š”์†Œ๋ฅผ ์–ด๋–ค ๋ฐฉํ–ฅ์œผ๋กœ๋“  ์ •๋ ฌํ•  ์ˆ˜๋„ ์žˆ๊ณ  ์ž์‹์˜ ํฌ๊ธฐ ๋˜ํ•œ ๋ทฐํฌํŠธ์— ๋”ฐ๋ผ ์œ ๋™์ ์œผ๋กœ ๋ณ€ํ™”ํ•œ๋‹ค. ๋ฌผ๋ก  ์ปจํ…Œ์ด๋„ˆ ๋‚ด๋ถ€์—์„œ๋งŒ ๋ง์ด๋‹ค.

์šฐ์„  ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์ธ <div> 3๊ฐœ๋ฅผ ๊ฐ์‹ธ๋Š” ์ปจํ…Œ์ด๋„ˆ <div>๋ฅผ ๋งŒ๋“ค์–ด๋ณด์ž.

<div class="container">
  <div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="box3">box3</div>
</div>

๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์ด๊ธฐ ๋•Œ๋ฌธ์— ๋‹น์—ฐํžˆ ์ปจํ…Œ์ด๋„ˆ์˜ ์•ˆ์—์„œ ํ•œ ์ค„์”ฉ ์˜์—ญ์„ ์ฐจ์ง€ํ•˜๊ณ  ์žˆ๋‹ค.
์ด์ œ ์„ธ ๊ฐœ์˜ ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ๋ฅผ ๊ฐ์‹ธ๊ณ  ์žˆ๋Š” .container์—๊ฒŒ display:flex๋ฅผ ์ ์šฉํ•ด๋ณด๊ฒ ๋‹ค.

์ ์šฉํ•œ ๋ชจ์Šต์€ ๋ธ”๋ก ๋ ˆ๋ฒจ์˜ ์š”์†Œ๊ฐ€ ํ•œ์ค„์„ ์ฐจ์ง€ํ•˜์ง€ ์•Š๊ณ  ๋งˆ์น˜ ์ธ๋ผ์ธ ์š”์†Œ์ฒ˜๋Ÿผ ์ฝ˜ํ…์ธ ์˜ ์˜์—ญ๋งŒ ์ฐจ์ง€ํ•˜๊ณ  ํ•œ ์ค„์— ๋ชจ๋‘ ์ •๋ ฌ๋˜์–ด์žˆ๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์ด๊ฒƒ์€ flex๊ฐ€ ์ ์šฉ์ด ๋˜๋ฉด ๋‚ด๋ถ€์˜ ์š”์†Œ๋“ค์€ inline-block์ด ์ ์šฉ๋œ ๋“ฏ์ด ํ•˜๋‚˜์˜ ํ–‰์œผ๋กœ ์ •๋ ฌ์ด ๋˜๋ฉฐ ํฌ๊ธฐ์™€ ๊ด€๋ จ๋œ ์†์„ฑ์ธ width, height ๋˜ํ•œ ์ ์šฉ์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ๋œ๋‹ค.

์ด์ œ flex๋ฅผ ์ ์šฉํ•˜๋ฉด ์–ด๋–ป๊ฒŒ ๋˜๋Š”์ง€ ์•Œ์•˜์œผ๋‹ˆ ์†์„ฑ์— ๋Œ€ํ•ด์„œ ์‚ดํŽด๋ณด์ž.




flex-direction ๐Ÿงญ

์œ„์—์„œ ์–ธ๊ธ‰๋œ ๊ฒƒ์ฒ˜๋Ÿผ flex๋Š” ํ•œ ๋ฐฉํ–ฅ์œผ๋กœ ์ •๋ ฌํ•˜๋Š”๋ฐ ํŠนํ™”๋œ ์†์„ฑ์ด๋ผ๊ณ  ํ–ˆ๋‹ค. ํ•œ ๋ฐฉํ–ฅ์ด๋ผ๋ฉด "ํ–‰"๊ณผ "์—ด"์ด ์žˆ๋Š”๋ฐ ์ด๊ฒƒ์„ ๊ฐ’์œผ๋กœ ํ•˜๋Š” ์†์„ฑ์ด ๋ฐ”๋กœ flex-direction์ด๋‹ค.

  • flex-direction : ์ •๋ ฌ์˜ ๊ธฐ์ค€์ด ๋˜๋Š” ์ฃผ์ถ•(Main axis)์˜ ๋ฐฉํ–ฅ์„ ์ •ํ•œ๋‹ค. ์†์„ฑ๊ฐ’์œผ๋กœ "์—ด"๊ณผ ๊ด€๋ จ๋œ column, column-reverse์™€ "ํ–‰"๊ณผ ๊ด€๋ จ๋œ row, row-reverse๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์—ฌ๊ธฐ์„œ ์ฃผ์ถ•(Main-axis)๋ž€ flex-direction์˜ ๊ฐ’์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง€๋Š”๋ฐ ๊ทธ๊ฒƒ์„ ๊ฐ„๋‹จํ•˜๊ฒŒ ์ด๋ฏธ์ง€๋กœ ์ •๋ฆฌํ•ด๋ณด์•˜๋‹ค.

flex-direction์€ Main-axis์˜ ๋ฐฉํ–ฅ๋งŒ ์ •ํ•  ๋ฟ Cross-axis์—๋Š” ๋ณ€ํ™”๋ฅผ ์ฃผ์ง€ ์•Š๋Š”๋‹ค.

์šฐ์„  column๊ณผ column-reverse๋ฅผ ์‚ดํŽด๋ณด์ž.


column

์œ„์˜ ์ด๋ฏธ์ง€๋ฅผ ๋ณด๋ฉด flex-direction:column์ด ์ ์šฉ๋œ ๊ฒฐ๊ณผ์ด๋‹ค.
display:flex์ผ ๋•Œ๋Š” ํ•˜๋‚˜์˜ ํ–‰์—์„œ ๋ชจ๋‘ ์ •๋ ฌ๋˜์–ด ์žˆ์—ˆ๋Š”๋ฐ ์ง€๊ธˆ์€ ์š”์†Œ๋งˆ๋‹ค ํ•˜๋‚˜์˜ ํ–‰์„ ๋‹ค ์ฐจ์ง€ํ•˜๋Š” ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์ฒ˜๋Ÿผ ์ •๋ ฌ์ด ๋˜์—ˆ๋‹ค.

๊ฒฐ๊ณผ์ ์œผ๋กœ column์€ Main axis๋ฅผ column์œผ๋กœ ์„ค์ •ํ•˜์—ฌ ๊ทธ ๋ฐฉํ–ฅ์œผ๋กœ ์ •๋ ฌํ•˜๋Š” ๊ฒƒ์„ ์„ค์ •ํ•˜๋Š” ์†์„ฑ์ด๋‹ค.

๋˜ํ•œ ๋งŒ์•ฝ ์ปจํ…Œ์ด๋„ˆ ์š”์†Œ ๋‚ด๋ถ€์— ์žˆ๋Š” ์ž์‹์š”์†Œ์—๊ฒŒ width๋ฅผ ์ฃผ์ง€ ์•Š์œผ๋ฉด ์•„๋ž˜์˜ ์ด๋ฏธ์ง€์ฒ˜๋Ÿผ ํ•œ ์ค„์˜ ์˜์—ญ์„ ๋ชจ๋‘ ์ฐจ์ง€ํ•˜๊ฒŒ ๋˜๋Š” ํŠน์ง•์ด ์žˆ๋‹ค.


column-reverse

column-reverse๋Š” ๋ง ๊ทธ๋Œ€๋กœ ๊ธฐ์กด์˜ column ๋ฐฉํ–ฅ๊ณผ ๋ฐ˜๋Œ€ ๋ฐฉํ–ฅ์œผ๋กœ ์ง„ํ–‰์ด ๋˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.
์œ„์˜ ์ด๋ฏธ์ง€๋Š” column-reverse๋ฅผ ์ ์šฉ์‹œํ‚จ ๊ฒฐ๊ณผ์ธ๋ฐ column๊ณผ ๋ฐ˜๋Œ€๋ฐฉํ–ฅ์œผ๋กœ ์ •๋ ฌ์ด ๋˜์–ด box๋“ค์ด ์•„๋ž˜์—์„œ ์œ„์ชฝ์œผ๋กœ ์ •๋ ฌ์ด ๋˜์—ˆ๊ณ  ์™ผ์ชฝ ์ƒ๋‹จ๋ถ€ํ„ฐ ์ •๋ ฌ๋˜๋˜ column๊ณผ ๋‹ฌ๋ฆฌ column-reverse๋Š” ์™ผ์ชฝ ํ•˜๋‹จ๋ถ€ํ„ฐ ์ •๋ ฌ์„ ๋˜์—ˆ๋‹ค.

row

์ด์ œ column๊ณผ ๋ฐ˜๋Œ€์ธ row๋ฅผ ์‚ดํŽด๋ณด์ž.
flex-direction์˜ ๊ธฐ๋ณธ๊ฐ’์ธ row๊ฐ€ ์ ์šฉ๋˜์—ˆ์„ ๋•Œ๋Š” column๊ณผ ๋ฐ˜๋Œ€๋กœ ํ•œ ์ค„ ์˜์—ญ์„ ์ฐจ์ง€ํ•˜์ง€ ์•Š๊ณ  ์ฝ˜ํ…์ธ ์˜ ์˜์—ญ๋งŒํผ๋งŒ ์ฐจ์ง€ํ•˜๊ณ  ์žˆ๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋‚ด๋ถ€์˜ ์š”์†Œ ๋˜ํ•œ ์ˆœ์„œ๋Œ€๋กœ ์ •๋ ฌ๋œ๋‹ค.

row-reverse

row-reverse๋Š” row์™€ ๋‹ค๋ฅด๊ฒŒ Main-axis์˜ ๋ฐฉํ–ฅ์ด ๋ฐ˜๋Œ€์ด๊ณ  ์š”์†Œ์˜ ์ •๋ ฌ ๋˜ํ•œ ๋ฐ˜๋Œ€๋กœ ๋˜์—ˆ๋‹ค. ๊ทธ๋ฆฌ๊ณ  ์™ผ์ชฝ์—์„œ ์ •๋ ฌ์„ ์‹œ์ž‘ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ ๊ทธ ๋ฐ˜๋Œ€์˜ ์˜ค๋ฅธ์ชฝ ๋์—์„œ ๋ถ€ํ„ฐ ์ •๋ ฌ์ด ์‹œ์ž‘๋œ๋‹ค.

์ฆ‰, column, column-reverse๋Š” ์š”์†Œ๊ฐ€ ๋ธ”๋ก ๋ ˆ๋ฒจ ์š”์†Œ์ฒ˜๋Ÿผ ํ–‰๋™ํ•˜๋ฉฐ, row,row-reverse์˜ ๊ฒฝ์šฐ ํฌ๊ธฐ ์กฐ์ ˆ์ด ๋˜๊ณ  ํ•œ ์ค„๋กœ ์ •๋ ฌ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ธ๋ผ์ธ ๋ธ”๋ก ์š”์†Œ์ฒ˜๋Ÿผ ํ–‰๋™ํ•œ๋‹ค๊ณ  ๋ณด๋ฉด ๋œ๋‹ค.




justify-contents

justify-contents๋Š” Main-axis๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์š”์†Œ๋ฅผ ์–ด๋–ป๊ฒŒ ์ •๋ ฌํ•  ๊ฒƒ์ธ๊ฐ€๋ฅผ ์„ค์ •ํ•˜๋Š” ์†์„ฑ์ด๋‹ค.

๋Œ€ํ‘œ์ ์ธ ์†์„ฑ๊ฐ’์€ ์•„๋ž˜์ฒ˜๋Ÿผ ์ •๋ฆฌํ–ˆ๋‹ค.

  • flex-start : Main-axis์˜ ์ง„ํ–‰๋ฐฉํ–ฅ์œผ๋กœ ์ •๋ ฌํ•˜๋Š” ์†์„ฑ๊ฐ’์ด๋‹ค.
  • flex-end : Main-axis์˜ ์ง„ํ–‰๋ฐฉํ–ฅ์˜ ๋ฐ˜๋Œ€์—์„œ ์ •๋ ฌํ•˜๋Š” ์†์„ฑ๊ฐ’์ด๋‹ค.
  • center : Main-axis์˜ ์ค‘์•™์— ์˜ค๋„๋ก ์ •๋ ฌํ•˜๋Š” ์†์„ฑ๊ฐ’, ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ์†์„ฑ๊ฐ’์ด๋‹ค.
  • space-around : Main-axis์˜ ๋ฐฉํ–ฅ์œผ๋กœ ์ปจํ…Œ์ด๋„ˆ์˜ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ์˜์—ญ์„ ๋‚ด๋ถ€ ์š”์†Œ๋งˆ๋‹ค ๊ท ๋“ฑํ•˜๊ฒŒ ๋‚˜๋ˆ„์–ด ์–‘ ์˜†์˜ ์˜์—ญ์„ ๋™์ผํ•˜๊ฒŒ ํ•˜์—ฌ ๋ฐฐ์น˜ํ•œ๋‹ค.
  • space-between : Main-axis์˜ ๋ฐฉํ–ฅ์œผ๋กœ ์ปจํ…Œ์ด๋„ˆ์˜ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ์˜์—ญ์„ ๋‚ด๋ถ€ ์š”์†Œ๊ฐ„์˜ ์‚ฌ์ด์—๋งŒ ๊ท ๋“ฑํ•˜๊ฒŒ ๋‚˜๋ˆ„์–ด ๋ฐฐ์น˜ํ•œ๋‹ค.
  • space-evenly : ์ปจํ…Œ์ด๋„ˆ์˜ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ์˜์—ญ์„ ๋‚ด๋ถ€ ์š”์†Œ๊ฐ„์˜ ์‚ฌ์ด์™€ ์–‘ ๋์„ ๊ท ์ผํ•œ ๊ฐ„๊ฒฉ์œผ๋กœ ์ ์šฉํ•˜๋Š” ์†์„ฑ๊ฐ’์ด๋‹ค. (IE์—์„œ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ์†์„ฑ์ด๋‹ค.)

- flex-start์™€ flex-end

flex-start์™€ flex-end๋Š” ์ผ๋ฐ˜์ ์ธ ์ •๋ ฌ์˜ ์†์„ฑ๊ฐ’์ด๋‹ค.

ํ˜„์žฌ flex-direction:row์ธ ์ปจํ…Œ์ด๋„ˆ ๋‚ด์˜ ์š”์†Œ๋“ค์€ flex-start๊ฐ€ ์ ์šฉ์ด ๋˜๋ฉด ์•„๋ž˜์ฒ˜๋Ÿผ ์ง„ํ–‰๋ฐฉํ–ฅ์œผ๋กœ ์ •๋ ฌ์ด ๋œ๋‹ค.

flex-end ๋˜ํ•œ ์š”์†Œ๋“ค์€ ์•„๋ž˜์ฒ˜๋Ÿผ Main-axis์˜ ๋ฐ˜๋Œ€๋ฐฉํ–ฅ์—์„œ ์ •๋ ฌ์ด ๋œ๋‹ค. flex-end์—์„œ ์ฃผ์˜ํ•ด์•ผ ํ•  ๊ฒƒ์€ row-reverse์ฒ˜๋Ÿผ "์š”์†Œ ๋˜ํ•œ ์—ญ์ˆœ์œผ๋กœ ์ •๋ ฌ์ด ๋˜๋Š” ๊ฒƒ"์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

์š”์†Œ์˜ ์ˆœ์„œ๋Š” ๋ณ€ํ•˜์ง€์•Š๊ณ  ์ปจํ…Œ์ด๋„ˆ ๋‚ด ์š”์†Œ์˜ ์ •๋ ฌ ๋ฐฉํ–ฅ๋งŒ ๋ฐ”๋€๋‹ค.

Main-axis๊ฐ€ ๋ฐ”๋€Œ๋ฉด ๊ทธ์— ๋”ฐ๋ผ ๊ฒฐ๊ณผ๋„ ๋ณ€ํ•œ๋‹ค.

์•„๋ž˜์˜ ์ด๋ฏธ์ง€๋Š” ๊ฐ๊ฐ ๋ฐฉํ–ฅ์ด column์ผ ๋•Œ์˜ flex-start์™€ flex-end์ผ๋•Œ์˜ ๊ฒฐ๊ณผ์ด๋‹ค.

- space-around

space-around๋Š” ๋ง๊ทธ๋Œ€๋กœ ๊ณต๊ฐ„์„ ์ฃผ์œ„์— ์ค€๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค.
์œ„์˜ ์ด๋ฏธ์ง€๋ฅผ ๋ณด๋ฉด ๊ตฌ๋ถ„์„ (์ ์„ )์ด ํ•œ ์š”์†Œ๊ฐ€ ์ฐจ์ง€ํ•˜๋Š” ์˜์—ญ์ด๋ผ๊ณ  ๋ณด๋ฉด ๋œ๋‹ค.
์š”์†Œ์˜ width๋ฅผ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ์˜์—ญ์„ ๊ฐ๊ฐ์˜ ์š”์†Œ๊ฐ€ ์–‘ ์˜†์— ์ฐจ์ง€ํ•˜๋Š” ์˜์—ญ(๊ฐ€๋กœ์˜ ํ™”์‚ดํ‘œ์„ )์œผ๋กœ ๊ท ๋“ฑํ•˜๊ฒŒ ๋‚˜๋ˆ„์–ด ์ •๋ ฌํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

์œ„์˜ ์ด๋ฏธ์ง€์—์„œ ํ™”์‚ดํ‘œ์„ ์€ ์„œ๋กœ ํฌ๊ธฐ๊ฐ€ ๋™์ผํ•˜๋‹ค.

- space-between

space-between์€ space-around์™€๋Š” ๋‹ค๋ฅด๊ฒŒ ์ž์‹ ์š”์†Œ์˜ ์–‘ ๋์— ๊ณต๊ฐ„์„ ์ฃผ์ง€ ์•Š๊ณ  ์˜ค์ง ์š”์†Œ ์‚ฌ์ด์—๋งŒ ๊ณต๊ฐ„์„ ์ค˜์„œ ์ผ์ •ํ•œ ๊ฐ„๊ฒฉ์œผ๋กœ ๋งŒ๋“œ๋Š” ์†์„ฑ์ด๋‹ค.

์ฃผ๋กœ ์•„๋ž˜ ์ด๋ฏธ์ง€์ฒ˜๋Ÿผ ๋„ค์ด๊ฒŒ์ด์…˜ ๋‚ด๋ถ€์˜ ์š”์†Œ๋ฅผ ์ •๋ ฌํ•˜๋Š”๋ฐ ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉ๋˜๋Š” ์†์„ฑ์ด๋‹ค.

์ถœ์ฒ˜๋Š” "awwwards"์—์„œ ์ฐพ์•„์„œ ๊ฐ€์ ธ์™”๋‹ค.

- space-evenly

space-evenly๋Š” ์ปจํ…Œ์ด๋„ˆ ์•ˆ์˜ ์š”์†Œ ์‚ฌ์ด์™€ ์–‘ ๋์˜ ๊ฐ„๊ฒฉ์˜ ํฌ๊ธฐ๋ฅผ ๋™์ผํ•˜๊ฒŒ ํ•˜์—ฌ ์ •๋ ฌํ•˜๋Š” ์†์„ฑ์ด๋‹ค.
์•„๋ž˜ ์ด๋ฏธ์ง€๋ฅผ ๋ณด๋ฉด ์ดํ•ด๊ฐ€ ๋  ๊ฒƒ์ด๋‹ค. ์ด๋ฏธ์ง€ ๋‚ด์˜ ํ™”์‚ดํ‘œ๋Š” ๊ฐ„๊ฒฉ์„ ๋‚˜ํƒ€๋‚ด๋Š”๋ฐ ๋ชจ๋‘ ๊ฐ™์€ ํฌ๊ธฐ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

์ •๋ฆฌ๋Š” ํ–ˆ์ง€๋งŒ space-evenly์€ ํ˜„์žฌ IE ๋ชจ๋“  ๋ฒ„์ „์—์„œ ์ง€์›ํ•˜์ง€ ์•Š๋Š” ์†์„ฑ์ด๋‹ค. IE๊ฐ€ ์ง€์›์„ 6์›” ์ค‘์ˆœ์ฏค์— ์ค‘์ง€ํ•œ๋‹ค๊ณ  ํ•˜์ง€๋งŒ ๋งŒ์•ฝ ๋ธŒ๋ผ์šฐ์ €๊ฐ„ ํ˜ธํ™˜์„ฑ์„ ์ค‘์š”ํ•˜๊ฒŒ ์ƒ๊ฐํ•œ๋‹ค๋ฉด ์‚ฌ์šฉ์„ ์ง€์–‘ํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

Justify-content์˜ ์†์„ฑ๊ฐ’์€ ๋งŽ์ด ํ—ท๊ฐˆ๋ฆฌ๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ์„ ๊ฒƒ์ด๋‹ค.
ํŠนํžˆ space-around, space-evenly๊ฐ€ ํ—ท๊ฐˆ๋ฆด ์ˆ˜ ์žˆ๋Š”๋ฐ ๊ฐ๊ฐ์˜ ์š”์†Œ๋ฅผ ๋Œ€์ƒ์œผ๋กœ ์–‘ ๋์— ๊ณต๊ฐ„์„ ์ฃผ๋Š”์ง€, ์š”์†Œ ์‚ฌ์ด(์ปจํ…Œ์ด๋„ˆ ํฌํ•จ)๋งˆ๋‹ค ๊ณต๊ฐ„์„ ์ฃผ๋Š๋ƒ์˜ ์ฐจ์ด์ด๋‹ค.




align-items

์ •๋ ฌ์˜ ๊ธฐ์ค€์„ Cross-axis๋กœ ํ•˜๊ณ  ์–ด๋–ป๊ฒŒ ์ •๋ ฌํ• ์ง€ ๊ฒฐ์ •ํ•˜๋Š” ์†์„ฑ์ด๋‹ค.

๋Œ€ํ‘œ์ ์ธ ์†์„ฑ๊ฐ’์€ ์ด๋ ‡๋‹ค.

  • strech : ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ ์ •ํ•ด์ง„ ์†์„ฑ๊ฐ’์ด๋‹ค. ์ปจํ…Œ์ด๋„ˆ ๋‚ด๋ถ€ ์š”์†Œ๋“ค์ด Cross-axis์˜ ๋ฐฉํ–ฅ์œผ๋กœ ๋Š˜์–ด๋‚˜๋Š” ์†์„ฑ๊ฐ’์ด๋‹ค.
  • flex-start : Cross-axis์˜ ์ง„ํ–‰๋ฐฉํ–ฅ์œผ๋กœ ์ •๋ ฌํ•˜๋Š” ์†์„ฑ๊ฐ’์ด๋‹ค.
  • flex-end : Cross-axis์˜ ์ง„ํ–‰๋ฐฉํ–ฅ์˜ ๋ฐ˜๋Œ€์—์„œ ์ •๋ ฌํ•˜๋Š” ์†์„ฑ๊ฐ’์ด๋‹ค.
  • center : Cross-axis์˜ ์ค‘์•™์— ์˜ค๋„๋ก ์ •๋ ฌํ•˜๋Š” ์†์„ฑ๊ฐ’, ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ์†์„ฑ๊ฐ’์ด๋‹ค.

- strech

strech๋Š” Cross-axis์˜ ๋ฐฉํ–ฅ์œผ๋กœ ๋Š˜์–ด๋‚˜๋Š” ์†์„ฑ๊ฐ’์ด๋‹ค.

๋ฌผ๋ก  ์œ„์˜ ์ด๋ฏธ์ง€์ฒ˜๋Ÿผ height๋ฅผ ์ง€์ •ํ•˜๋ฉด ๊ทธ ๊ฐ’๋งŒํผ์˜ ๋†’์ด๋ฅผ ๊ฐ€์ง„๋‹ค.


- flex-start์™€ flex-end

justify-content์™€ ๊ธฐ์ค€๋งŒ Cross-axis๋กœ ๋ฐ”๋€Œ๊ณ  ๋™์ž‘์€ ๋˜‘๊ฐ™์€ ์†์„ฑ์ด๋‹ค.

๋ฐ˜๋Œ€์˜ ์ถ•์œผ๋กœ ์›€์ง์ด๊ธฐ ๋•Œ๋ฌธ์— ์œ„์ชฝ๋ถ€ํ„ฐ ์ •๋ ฌํ•˜๋Š” flex-start์™€ ์•„๋ž˜์ชฝ ๋ถ€ํ„ฐ ์ •๋ ฌํ•˜๋Š” flex-end์ด๋‹ค.

์•„๋ž˜์˜ ์ด๋ฏธ์ง€๋Š” ์ˆœ์„œ๋Œ€๋กœ flex-direction:row์ผ๋•Œ flex-start์™€ flex-end์˜ ๊ฒฐ๊ณผ์ด๋‹ค.

์•„๋ž˜๋ถ€ํ„ฐ๋Š” flex-direction:column์ผ ๋•Œ flex-start์™€ flex-end์˜ ๊ฒฐ๊ณผ์ด๋‹ค.


- justify content์™€ align-items์˜ ๊ณตํ†ต์ ์ธ ์†์„ฑ๊ฐ’ center

์š”์†Œ๋ฅผ ๊ฐ€์šด๋ฐ ์ •๋ ฌํ•˜๊ธฐ ์œ„ํ•ด ์‚ฌ์šฉํ•˜๋Š” center์ด๋‹ค. justify-content์˜ ์†์„ฑ๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•˜๋ฉด Main-axis์˜ ๋ฐฉํ–ฅ์— ๋”ฐ๋ผ, align-items์˜ ์†์„ฑ๊ฐ’์œผ๋กœ ์‚ฌ์šฉํ•˜๋ฉด Cross-axis์˜ ๋ฐฉํ–ฅ์— ๋”ฐ๋ผ
์ค‘์•™์— ์ •๋ ฌํ•œ๋‹ค.

์ฃผ๋กœ ์ปจํ…Œ์ด๋„ˆ ์š”์†Œ์˜ ๊ฐ€๋กœ์™€ ์„ธ๋กœ ๋ชจ๋‘ ์ค‘์•™ ์ •๋ ฌํ•˜๊ณ  ์‹ถ์„ ๋•Œ justify-content, align-items์— center๋ฅผ ์ ์šฉ์‹œ์ผœ ์ •๋ ฌ์‹œํ‚จ๋‹ค!




flex-wrap

display:flex๊ฐ€ ์ ์šฉ๋œ ์ปจํ…Œ์ด๋„ˆ์— ์‚ฌ์šฉํ•˜๋Š” ์ค„ ๋ฐ”๊ฟˆ์— ๋Œ€ํ•œ ์†์„ฑ์ด๋‹ค.

์ปจํ…Œ์ด๋„ˆ์˜ ์ด ๋„ˆ๋น„์— ์•ˆ์˜ ๋‚ด๋ถ€ ์š”์†Œ๋“ค์ด ๋”์ด์ƒ ์ •๋ ฌํ•  ์ž๋ฆฌ๊ฐ€ ์—†์„ ๋•Œ ์•„๋ž˜๋กœ ์ค„์„ ๋„˜๊ธฐ๋Š”์ง€ ์•„๋‹ˆ๋ฉด ๋ฐ–์œผ๋กœ ๋‚˜๊ฐ€๊ฒŒ ํ•˜๋Š”์ง€ ๊ฒฐ์ •ํ•œ๋‹ค.

- nowrap

๊ธฐ๋ณธ๊ฐ’์ธ ์†์„ฑ๊ฐ’, ์ปจํ…Œ์ด๋„ˆ ๋„ˆ๋น„๋ณด๋‹ค ๋‚ด๋ถ€ ์š”์†Œ์˜ ๋„ˆ๋น„์˜ ํ•ฉ์ด ํด ๊ฒฝ์šฐ ๋‹ค์Œ ์ค„๋กœ ๋„˜์–ด๊ฐ€์ง€ ์•Š๊ณ  ์˜†์œผ๋กœ ๋„˜์–ด๊ฐ„๋‹ค.

์œ„์˜ ์ด๋ฏธ์ง€ ์ฒ˜๋Ÿผ ๋ฐ•์Šค๊ฐ€ ๋งŒ์•ฝ ๋„˜์–ด๊ฐ€๋ฉด ๋‹ค์Œ ์ค„์ด ์•„๋‹Œ Main-axis ๋ฐฉํ–ฅ์œผ๋กœ ์ด์–ด์„œ ๋‚˜์—ด์ด ๋œ๋‹ค.
ํ•˜์ง€๋งŒ ์ด ๊ฒฝ์šฐ ์š”์†Œ์˜ ๋„“์ด๋Š” ์œ ์ง€๋˜์ง€ ์•Š๊ณ  ์ปจํ…Œ์ด๋„ˆ ๋„ˆ๋น„์— ๋งž๊ฒŒ ์š”์†Œ๋Š” ํฌ๊ธฐ๊ฐ€ ์กฐ์ ˆ๋œ๋‹ค.

์›๋ž˜์˜ ์˜์—ญ์˜ ์ค‘๊ฐ„์˜ ํ™”์‚ดํ‘œ๊ฐ€ ์ปจํ…Œ์ด๋„ˆ ๋„ˆ๋น„์— ๋งž์ถ”๊ณ  ๋„˜์นœ ์š”์†Œ์˜ ์ˆจ๊ฒจ์ง„ ๋„ˆ๋น„๋ฅผ ์˜๋ฏธํ•œ๋‹ค.

- wrap

์ปจํ…Œ์ด๋„ˆ ๋„ˆ๋น„๋ณด๋‹ค ๋‚ด๋ถ€ ์š”์†Œ์˜ ๋„ˆ๋น„์˜ ํ•ฉ์ด ํฌ๋ฉด ๋„˜์–ด๊ฐ€๋Š” ์š”์†Œ๋ฅผ ์•„๋ž˜ ์ค„๋กœ ๋„˜์–ด๊ฐ€๊ฒŒ ํ•˜๋Š” ์†์„ฑ์ด๋‹ค.

์œ„์˜ ์ด๋ฏธ์ง€์ฒ˜๋Ÿผ ์ปจํ…Œ์ด๋„ˆ ๋„ˆ๋น„๋ฅผ ๋„˜์–ด๊ฐ€๋Š” ์š”์†Œ๋ถ€ํ„ฐ ์•„๋ž˜ ์ค„๋กœ ์ •๋ ฌ์ด ๋œ๋‹ค.
๊ทธ๋ฆฌ๊ณ  ์š”์†Œ์— ์ •ํ•ด์ง„ ํฌ๊ธฐ๋Š” ๊ทธ๋Œ€๋กœ ์œ ์ง€๋˜์–ด ์ค„๋ฐ”๊ฟˆ์ด ์ผ์–ด๋‚œ๋‹ค.
๋งŒ์•ฝ ์ปจํ…Œ์ด๋„ˆ ๋„ˆ๋น„๊ฐ€ ๋‚ด๋ถ€์˜ ์š”์†Œ ๋„ˆ๋น„์˜ ํ•ฉ๋ณด๋‹ค ๋” ํฌ๋‹ค๋ฉด ๋‚˜๋จธ์ง€ ์˜์—ญ์„ ๊ฐ„๊ฒฉ์œผ๋กœ ์ •๋ ฌ๋œ๋‹ค.



flex-flow

flex-flow๋Š” flex-direction, flex-wrap๋ฅผ ํ•œ๊บผ๋ฒˆ์— ์ถ•์•ฝํ˜•์œผ๋กœ ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ์†์„ฑ์ด๋‹ค.

flex-flow: "flex-direction" "flex-wrap"



์ •๋ฆฌ๋ฅผ ๋งˆ์น˜๋ฉฐ โ›ณ๏ธ

flex๋Š” ์ •๋ฆฌํ•  ๋‚ด์šฉ์ด ๋งŽ์•„์„œ ๋†€๋ž๋‹ค.
๋‚ด๊ฐ€ ๋ชฐ๋ž๋˜ flex-flow๋„ ์žˆ์—ˆ๊ณ  ์‚ฌ์šฉํ•  ์ค„ ๋ชฐ๋ž๋˜ flex-wrap๋„ ์žˆ์—ˆ๋‹ค.
flex-wrap์€ ํ˜ผ์ž ๊ณต๋ถ€ํ–ˆ์„ ๋•Œ ๊ฐ์„ ๋ชป์žก์•„์„œ ์–ด๋–ป๊ฒŒ ์ดํ•ดํ• ์ง€ ๋ชฐ๋ž๋Š”๋ฐ ๊ฐ•์‚ฌ๋‹˜๊ป˜์„œ ์ง์ ‘ ๊ฐ€๋ฅด์ณ์ฃผ์‹œ๊ณ  ํ˜ผ์ž ์˜ˆ์ œ๋ฅผ ๋งŒ๋“ค์–ด๊ฐ€๋ฉด์„œ ํ•ด๋ณด๋‹ˆ๊นŒ ์ดํ•ด๊ฐ€ ์ž˜ ๋˜๋Š” ๊ฒƒ ๊ฐ™๋‹ค!

ํ•˜์ง€๋งŒ ์•„์ง ๋‹ค๋ฃจ์ง€ ์•Š์€ ์†์„ฑ ์ค‘์— flex-basis, flex-shrink, flex-grow ์žˆ๋Š”๋ฐ ์•„์ง์€ ์ดํ•ด๊ฐ€ ์ข€ ์•ˆ๋œ ๊ฒƒ ๊ฐ™์•„์„œ ๋‹ค์Œ ๊ฒŒ์‹œ๋ฌผ์— ์ •๋ฆฌํ•˜๋„๋ก ํ•˜๊ฒ ๋‹ค.

profile
untiring_dev

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

comment-user-thumbnail
2022๋…„ 4์›” 16์ผ

ํ˜„์šฐ๋‹˜ Flex TIL ์ž˜ ๋ณด๊ณ  ๊ฐ‘๋‹ˆ๋‹ค!

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ