Flex

  • ์ฝ˜ํ…์ธ ๋ฅผ ์ •๋ ฌํ•˜๊ฑฐ๋‚˜ ๊ณต๊ฐ„์„ ๋‚˜๋ˆŒ ์ˆ˜ ์žˆ๋Š” CSS ์†์„ฑ์˜ ์ง‘ํ•ฉ
  • ์ฒ˜์Œ ๋ต™๊ฒŒ ๋œ ํ•œ์žฌํ˜„ ๊ฐ•์‚ฌ๋‹˜์˜ ๊ฐ•์˜๋ฅผ ๋“ค์—ˆ๋‹ค. ์ดํ˜ธ์ค€ ๊ฐ•์‚ฌ๋‹˜๊ณผ ๊ฐ™์ด ์ •๋ง ์ž˜ ๊ฐ€๋ฅด์ณ์ฃผ์…จ๊ณ , ์ˆ˜๊ฐ•์ƒ๋ถ„๋“ค์ด ํ•˜์‹  ์งˆ์˜์‘๋‹ต์„ ๋„ˆ๋ฌด ์ž˜ ๋ฐ›์•„์ฃผ์…จ๋‹ค. ๋ฌด์—‡๋ณด๋‹ค ์ˆ˜์—…์ด ์œ ์พŒํ•˜๊ณ , ๋ฆฌ์•ก์…˜์ด ํ™œ๋ฐœํ•˜์…”์„œ ์กธ์Œ์ด ์˜ค์ง€ ์•Š๋Š”๋‹ค๋Š”...! ๐Ÿ‘ฆ๐Ÿป

[Position ๋ณด์ถฉ]

  • Absolute๋Š” ๋ณธ๋ž˜ ์œ„์น˜์— ๊ณ„์† ์žˆ์Œ

  • sticky๋Š” ๋‚˜์˜จ์ง€ ์–ผ๋งˆ ์•ˆ๋˜ '-webkit-'๊ณผ ๊ฐ™์€ ๋ธŒ๋ผ์šฐ์ € ์ง€์›์„ ์œ„ํ•œ ๋ฒค๋” ํ”„๋ฆฌํ”ฝ์Šค๊ฐ€ ํ•„์š”ํ•จ


    [Flex]

  • display : flex;๋กœ ์„ ์–ธ

  • ๋ถ€๋ชจ๋Š” container, ์ž์‹์€ item

  • ์ž์‹ ์˜ ์ง๊ณ„์ž์‹๊นŒ์ง€๋งŒ ์˜ํ–ฅ

  • ์ถ• ๋ฐฉํ–ฅ :
    [๊ฐ€๋กœ] row, row-reverse
    [์„ธ๋กœ] column, column-reverse

  • justify-content๋กœ ๋ฐฐ์—ด ์œ„์น˜, ์•„์ดํ…œ ๊ฐ„๊ฒฉ ์กฐ์ •

  • justify๋Š” ๋ฉ”์ธ์ถ• ๋ฐฉํ–ฅ, align์€ ์ˆ˜์ง ๋ฐฉํ–ฅ

  • <br> ํƒœ๊ทธ๋Š” ์Šคํฌ๋ฆฐ ๋ฆฌ๋”๊ฐ€ ์ฝ๋‹ค๊ฐ€ ๋Š์–ด๋ฒ„๋ฆฌ๋ฏ€๋กœ ์ค„๋ฐ”๊ฟˆ ์ด์šฉ ์ž์ œ

  • wrap์„ ์‚ฌ์šฉํ•˜์—ฌ ์ค„๋ฐ”๊ฟˆ

  • order ๊ฐ’์€ ์ˆœ์„œ ๊ฐ’์ด ์•„๋‹ˆ๋ผ ์šฐ์„ ์ˆœ์œ„
    (- ์Œ์ˆ˜ ๊ฐ’์€ ๊ฐ’์ด ๋‚ฎ์•„์งˆ์ˆ˜๋ก ์šฐ์„ ์ˆœ์œ„๊ฐ€ ์•ž์„ฌ)

  • blue, green, yellow๋ฅผ flex ์„ค์ •

  • background: black;, justify-content: space-between; ๋กœ ์ •๋ ฌ

  • ์œ„ ์ด๋ฏธ์ง€๋Š” ์˜ค๋ฅธ์ชฝ ์‚ฌ์ด๋“œ๊ฐ€ ์„ธ๋กœ ์—ญ๋ฐฉํ–ฅ์ด๊ธฐ ๋•Œ๋ฌธ์— right_side๋ฅผ flex-direction: column-reverse ์„ค์ •


  • ๋ฉ”์ธ์ถ•์˜ end ์œ„์น˜, ์ˆ˜์ง์ถ•์˜ ์ค‘์•™์ •๋ ฌ์ด ํ•„์š”

  • justify-content: flex-end์™€ align-items: center ํ•„์š”


  • ๊ฐœ๊ตฌ๋ฆฌ๋ฅผ ํ•ด๋‹น ์œ„์น˜์— ๋ณด๋‚ด๊ธฐ ์œ„ํ•ด์„œ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ฝ”๋“œ ๊ตฌ์„ฑ

  • display: flex;
    flex-direction: row-reverse;
    align-items: end;
    justify-content: center;


  • flex์— ๋Œ€ํ•œ ๊ฐœ๋…๊ณผ ์‹ค์Šต์„ 'flexbox froggy' ์‚ฌ์ดํŠธ๋ฅผ ํ†ตํ•ด ์ž˜ ์ดํ•ดํ•˜๊ณ , ์ต์ˆ™ํ•ด์ง€๋Š”๋ฐ ๋งŽ์€ ๋„์›€์„ ๋ฐ›์•˜๋‹ค..! ํ™•์‹คํžˆ ๊ฐ€์‹œํ™”๋œ ํ™”๋ฉด์„ ํ†ตํ•ด ํ•™์Šตํ•˜๋Š” ํšจ๊ณผ๋Š” ์ œ์ผ์ธ ๊ฒƒ ๊ฐ™๋‹ค๐Ÿ‘๐Ÿป
profile
https://big-huni.tistory.com // ์ด์ „ํ•ฉ๋‹ˆ๋‹ค.

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