[TIL] CSS Breakdown (FLEX๐Ÿค˜)

What is FLEX??๐Ÿ˜Ž

์šฐ์„  flex๋ž€ ์ •๋ ฌ๊ณผ ๊ด€๋ จ๋œ, ๋ฐ•์Šค๋“ค์˜ ๊ณต๊ฐ„์„ ๋‚˜๋ˆ„๋Š” CSS ์†์„ฑ์˜ ์ง‘ํ•ฉ์ด๋‹ค.
๋‚˜๋Š” ์ด๊ฑธ ํ๋ฆ„์ •๋„๋กœ ์ดํ•ดํ•˜๊ณ  ์žˆ๋‹ค.
(์ขŒ์—์„œ ์šฐ๋กœ / ์šฐ์—์„œ ์ขŒ๋กœ / ์œ„์—์„œ ์•„๋ž˜๋กœ / ๋ฐ‘์—์„œ ์œ„๋กœ) ํ๋ฅธ๋‹ค๐Ÿ˜€

์žŠ์ง€๋ง์ž, display: flex;๋Š” ๋ถ€.๋ชจ.์—.๊ฒŒ. ์ ์šฉํ•œ๋‹ค!!

/* ๋ถ€๋ชจ์—๊ฒŒ ์ ์šฉ์„ ํ•ด์ฃผ์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค!!!!!! */
display: flex;
display: inline-flex; /*๋ถ€๋ชจ๊ฐ€ ์ž์‹์˜ ์ปจํ…์ธ ๋งŒํผ๋งŒ ์ž๋ฆฌ๋ฅผ ์ฐจ์ง€ํ•ฉ๋‹ˆ๋‹ค*/

์ด๋•Œ ๋ถ€๋ชจ๋ฅผ Flex-container, ์˜ํ–ฅ์„ ๋ฐ›๋Š” ์ž์‹๋“ค์„ Flex-item์ด๋ผ๊ณ  ๋ถ€๋ฅธ๋‹ค.
flex ๋Š” ์ž์‹ ์˜ ์ง๊ณ„์ž์‹๊นŒ์ง€๋งŒ! ์˜ํ–ฅ์„ ๋ฏธ์นฉ๋‹ˆ๋‹ค.(์ž์†์€ ์•„๋‹™๋‹ˆ๋‹ค!!)
๋Œ€๋ถ€๋ถ„์˜ ์ •๋ ฌ์„ ํ•ด์ฃผ๋Š” ์†์„ฑ๋“ค์€ ๋ถ€๋ชจ์—์„œ ์ปจํŠธ๋กค ํ•ด์ฃผ๋ฉด ๋œ๋‹ค.

1. flex-direction

ํ๋ฆ„์˜ ๋ฐฉํ–ฅ์„ ์˜๋ฏธํ•˜๋ฉฐ, 4๊ฐ€์ง€์˜ ๋ฐฉํ–ฅ์ด ์žˆ๋‹ค.

/* ๊ธฐ๋ณธ ๊ฐ’์ด๋ฉฐ, float:left;์™€ ๊ฐ™๋‹ค */
flex-direction: row;
/* ๊ธฐ๋ณธ ๊ฐ’์ด๋ฉฐ, float:right;์™€ ๊ฐ™๋‹ค */
flex-direction: row-reverse;
/* ๊ธฐ๋ณธ์ ์œผ๋กœ ์ฃผ๋ฃจ๋ฃจ๋ฃฉ ์Œ“์ด๋Š” ๋ชจ์Šต๊ณผ ๊ฐ™๋‹ค */
flex-direction: column;
/* ์—ญ์ˆœ์œผ๋กœ ์ฃผ๋ฃจ๋ฃจ๋ฃฉ ์Œ“์ด๋Š” ๋ชจ์Šต๊ณผ ๊ฐ™๋‹ค */
flex-direction: column-reverse;

justify-content์— ๋“ค์–ด๊ฐ€๊ธฐ ์•ž์„œ main-axis์™€ cross-axis๋ฅผ ์•Œ์•„์•ผ ํ•œ๋‹ค.
์ด๋Š” flex-direction์œผ๋กœ ์ง€์ • ํ•ด์ค€๊ฒƒ๊ณผ ์—ฐ๊ด€์ด ์žˆ๋‹ค.
row ๋กœ ์„ค์ •ํ•œ ๊ฒฝ์šฐ, ์ดˆ๋ก์ƒ‰์ด ๋ฉ”์ธ์ถ•, ๋นจ๊ฐ„์ƒ‰์ด ๊ต์ฐจ์ถ•์ด๋‹ค!!
column ์ด๋ฉด ๊ทธ ๋ฐ˜๋Œ€์ด๋ฉฐ, ๊ฐ ์ถ•์€ ์‹œ์ž‘์ ๊ณผ ๋์ ์ด ์žˆ๋‹ค.

flex๋ฅผ ์“ฐ๋Š” ์ ˆ๋Œ€์ ์ธ ์ด์œ ์ธ ์ •๋ ฌ๊ณผ ๋ฐฐ์น˜์— ๋“ค์–ด๊ฐ€๊ธฐ์— ์•ž์„œ ๋ฉ”์ธ์ถ•๊ณผ ๊ต์ฐจ์ถ•์„ ๋‹ค์‹œ ํ•œ๋ฒˆ ์œ ๋…ํ•˜์ž!

2. justify-content

main-axis ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ •๋ ฌํ•œ๋‹ค!!!(๊ฐ€๋กœ์„ธ๋กœ๋กœ ์ƒ๊ฐ์น˜ ๋ง๊ณ  ๋ฉ”์ธ ์ถ•์„ ์œ ๋…ํ•  ๊ฒƒ!!!)

display: flex;
justify-content: flex-start;
justify-content: flex-end;
justify-content: center;
justify-content: space-between;
justify-content: space-around;

์ƒ์œ„ 3๊ฐœ์˜ ๊ฐ’์€ ์ง๊ด€์ ์ธ ์ดํ•ด๊ฐ€ ๊ฐ€๋Šฅํ•˜์ง€๋งŒ, between๊ณผ around์˜ ์ฐจ์ด๊ฐ€ ๋ชจํ˜ธํ•˜๋‹ค.

between ์€ ์–‘์ชฝ์œผ๋กœ ์ญ‰ ๋Š˜๋ฆฐ ๋ชจ์–‘์ด๊ณ ,
around ๋Š” ๊ฐ ์•„์ดํ…œ๋“ค ๋งˆ๋‹ค ์ขŒ์šฐ๋กœ ๋ชจ๋‘ ๋™์ผํ•œ ๋„ˆ๋น„๋งŒํผ์˜ ๊ณต๋ฐฑ์ด ์ƒ๊ธด๋‹ค.
(์„ค๋ช…๋ณด๋‹ค ์‚ฌ์ง„์ด ์ดํ•ด๊ฐ€ ๋น ๋ฅด๋‹ค.)

3. align-items, align-content

align-items ๋Š” cross-axis ๋ฅผ ๊ธฐ์ค€์œผ๋กœ ์ •๋ ฌํ•œ๋‹ค.
align-content๋Š” flex-container์˜ cross-axis์ถ•์˜ ์•„์ดํ…œ๋“ค์ด ์—ฌ๋Ÿฌ์ค„ ์ผ๋•Œ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค. (align-self๋Š” ์ž์‹์š”์†Œ์— ์“ฐ๋Š” ์†์„ฑ์ž…๋‹ˆ๋‹ค. ์ด์™€ ํ˜ผ๋™ํ•˜์ง€ ๋ง™์‹œ๋‹ค!!)
align-self๋Š” ์ž์‹์š”์†Œ์— ์‚ฌ์šฉํ•˜๊ณ , ๋ถ€๋ชจ์˜ align-items๋ฅผ ๋ฎ์–ด ๋ฒ„๋ฆฝ๋‹ˆ๋‹ค.

.container {
  display: flex;
  align-items: stertch; /* ๊ธฐ๋ณธ๊ฐ’ */
  align-items: center;
  align-items: flex-start;
  align-items: flex-end;
}

4. flex-wrap

์ž์‹์˜ ํฌ๊ธฐ๊ฐ’์„ ๋ฌด์‹œํ•˜๋Š๋ƒ ๋งˆ๋Š๋ƒ์™€ ๊ด€๋ จ๋œ ์†์„ฑ์ž…๋‹ˆ๋‹ค.
์ฆ‰, ์ž์‹๋“ค์˜ ํฌ๊ธฐ๋ฅผ ๋ฌด์‹œํ•˜๊ณ  ์ž์‹๋“ค์„ ์ฐŒ๋ถ€์‹œํ‚ค๋Š๋ƒ
์ž์‹๋“ค์˜ ํฌ๊ธฐ๋ฅผ ์ธ์ •ํ•˜๊ณ , ๋ถ€๋ชจ์˜ ๊ณต๊ฐ„์ด ๋ชจ์ž๋ผ๋‹ค๋ฉด ๋‹ค์Œ์ค„๋กœ ๋‚ด๋ ค์ฃผ๋Š๋ƒ์˜ ์ฐจ์ด์ž…๋‹ˆ๋‹ค.
nowrap์ด ๊ธฐ๋ณธ ๊ฐ’์ด๋ฉฐ, ์ด๋Š” ๋ฌด์‹œํ•˜๊ณ  ์ฐŒ๋ถ€์‹œํ‚ค๋Š” ๊ฐ’์ž…๋‹ˆ๋‹ค.
wrap์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ๋ณด๋‹ค ๋” ์•ˆ์ •์ ์ธ ๋Š๋‚Œ์ด ๋“ค๊ฒƒ์ž…๋‹ˆ๋‹ค.

flex-wrap: nowrap; /*default*/
flex-wrap: wrap;
flex-wrap: wrap-reverse;


์œ„ ์•„๋ž˜ ๋ชจ๋‘ ์•„์ดํ…œ๋“ค์ด ๋™์ผ ๋„ˆ๋น„๋ฅผ ๊ฐ€์ง„ ๊ฐ’๋“ค์ด์ง€๋งŒ, wrap๊ฐ’์„ ์ฃผ์—ˆ๋Š๋ƒ ์•ˆ์ฃผ์—ˆ๋Š๋ƒ์˜ ์ฐจ์ด์ž…๋‹ˆ๋‹ค.
์œ„ : no-wrap
์•„๋ž˜ : wrap

wrap-reverse๋Š” ์กฐ๊ธˆ ์œ„ํ™”๊ฐ์ด ๋“œ๋Š” ๋…€์„์ž…๋‹ˆ๋‹ค.
์•„์˜ˆ ๋ชจ๋“  ์ˆœ์„œ๋ฅผ ๋ฆฌ๋ฒ„์‹ฑ ์‹œํ‚ค๋Š” ๊ฒŒ ์•„๋‹™๋‹ˆ๋‹ค!!!
์ฐจ๊ณก์ฐจ๊ณก ์ž˜ ์Œ“์•„์ค€ ๋’ค, ์ค„๋“ค๋งŒ์„ ๋ฆฌ๋ฒ„์‹ฑ ์‹œํ‚ต๋‹ˆ๋‹ค.

flex-basis

์ž์‹์š”์†Œ์— ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค!!!!!

  • item๋“ค์˜ ํฌ๊ธฐ๋ฅผ ์ง€์ •ํ•œ๋‹ค.
  • flex-direction์— ์˜ํ–ฅ์„ ๋ฐ›๋Š”๋‹ค.(row๋ฉด ๋„ˆ๋น„, column์ด๋ฉด ๋†’์ด)
  • width, height ๊ฐ’์€ ๋ฌด์‹œ๋ฉ๋‹ˆ๋‹ค.

order

์ž์‹์š”์†Œ์— ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค!!!!!

flex-item ๋“ค์˜ ์ˆœ์„œ๋ฅผ ๊ฒฐ์ •ํ•œ๋‹ค. ์ˆ˜์˜ ์˜๋ฏธ๋กœ ์ˆœ์„œ๋ฅผ ๊ฒฐ์ •ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค. ์ˆ˜์˜ ํฌ๊ธฐ๋กœ ๊ฒฐ์ •ํ•ฉ๋‹ˆ๋‹ค. ์ˆ˜๊ฐ€ ์ž‘์„ ์ˆ˜๋ก ๋” ์šฐ์„  ์ˆœ์œ„๋ฅผ ๋ถ€์—ฌ ๋ฐ›์Šต๋‹ˆ๋‹ค. (์Œ์ˆ˜๋„ ์‚ฌ์šฉ์ด ๊ฐ€๋Šฅํ•ฉ๋‹ˆ๋‹ค.)

๐Ÿ˜ฎNew!!

  • display: flex;๋กœ ํ•ด์ฃผ๊ณ  ์ฐฝ์˜ ํญ์„ ์ค„์—ฌ์ฃผ๋‹ˆ ์•ฝ๊ฐ„์˜ ๋ฐ˜์‘ํ˜•์ฒ˜๋Ÿผ ๋ฆฌ์ŠคํŠธ๋“ค์ด ์ชผ๊ทธ๋ผ ๋“ค๋”๋ผ
    • ํ•˜์ง€๋งŒ ์ปจํ…์ธ ํฌ๊ธฐ๋ณด๋‹ค๋Š” ์ž‘์•„์ง€์ง€ ์•Š๋”๋ผ..(๋‹น์—ฐํ•œ๊ฑด๊ฐ€?)
  • dislay: inline-flex;๋กœ ํ•ด์ฃผ๊ณ  ์ฐฝ์˜ ํญ์„ ์ค„์—ฌ์ฃผ๋‹ˆ ์ค„์ง€์•Š๊ณ  ์ขŒ์šฐ์Šคํฌ๋กค์ด ์ƒ๊ธฐ๋”๋ผ

์ข‹์€ ์›นํŽ˜์ด์ง€ ์ฆ๊ฒจ์ฐพ๊ธฐ