[HTML/CSS] Day20. Flex(2) ๐Ÿคทโ€โ™‚๏ธ

์ž, ๋‹ค์‹œ flex ์ •๋ฆฌ ์‹œ๊ฐ„์ด๋‹ค.
์ด๋ฒˆ์— ๋‹ค๋ฃฐ flex ์†์„ฑ์€ flex-basis, flex-shrink, flex-grow์ด๋‹ค.

์ด๋ฒˆ ์†์„ฑ๋“ค์€ ์ปจํ…Œ์ด๋„ˆ ์š”์†Œ๊ฐ€ ์•„๋‹Œ "์ž์‹ ์š”์†Œ(flex-item)"์— ์ ์šฉํ•˜๋Š” ์†์„ฑ์ด๋‹ค.

์ด ๋ถ€๋ถ„์€ flex๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์›ฌ๋งŒํ•˜๋ฉด ๊ฑด๋“œ๋ฆฌ์ง€ ์•Š๋˜ ์†์„ฑ์ธ๋ฐ ์ƒ๊ฐ๋ณด๋‹ค ์œ ์šฉํ•œ ๋ถ€๋ถ„์ด ์žˆ์–ด์„œ ์ •๋ฆฌํ•˜๋ ค๊ณ  ํ•œ๋‹ค.

- flex-basis

flex-basis๋Š” ๋ง ๊ทธ๋Œ€๋กœ "๊ธฐ์ดˆ"๋ผ๋Š” ๋ง์ด๋‹ค. ๊ธฐ๋ณธ์ ์ธ ์ž์‹ ์š”์†Œ๋“ค์˜ ํฌ๊ธฐ๋ฅผ ์ง€์ •ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.
์ด๊ฒƒ ๋˜ํ•œ ์•ž์—์„œ ์–ธ๊ธ‰ํ–ˆ๋˜ Main-axis์— ๋”ฐ๋ผ ๋‹ฌ๋ผ์ง„๋‹ค.

๊ฐ’์˜ ๊ฒฝ์šฐ ๋‹ค์–‘ํ•œ ๋‹จ์œ„๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ์„ค์ •ํ•  ์ˆ˜ ์žˆ๋‹ค.

.item {
	flex-basis: auto;
	/* flex-basis: 0; */
	/* flex-basis: 50%; */
	/* flex-basis: 300px; */
	/* flex-basis: 10rem; */
	/* flex-basis: content; */
}

content๋ผ๋Š” ๋‹จ์œ„๊ฐ€ ์–ด์ƒ‰ํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ ์ฝ˜ํ…์ธ  ์˜์—ญ์˜ ํฌ๊ธฐ๋งŒํผ ์กฐ์ ˆ๋œ๋‹ค๊ณ  ์ƒ๊ฐํ•˜๋ฉด ๋œ๋‹ค.

๋งŒ์•ฝ flex-direction์˜ ๊ฐ’์ด row๋ผ๋ฉด ๋„ˆ๋น„๋ฅผ, column์ด๋ผ๋ฉด ๋†’์ด์— ๊ธฐ๋ณธ์ ์ธ ํฌ๊ธฐ๋กœ ์ ์šฉ์ด ๋œ๋‹ค.
์•„๋ž˜ ์ด๋ฏธ์ง€๋Š” flex-direction์„ ๊ฐ๊ฐ row, column์„ ์ ์šฉ์‹œํ‚ค๊ณ  ์ž์‹์š”์†Œ์— flex-basis:100px๋ฅผ ์ ์šฉํ•œ ๊ฒฐ๊ณผ์ด๋‹ค.

๋ณด๋ฉด row์ผ๋•Œ๋Š” ์ž์‹์š”์†Œ์˜ ๋„ˆ๋น„๊ฐ€ ๋Š˜์–ด๋‚ฌ๊ณ , column์ผ๋•Œ๋Š” ์ž์‹์š”์†Œ์˜ ๋†’์ด๊ฐ€ ๋Š˜์–ด๋‚œ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์—ฌ๊ธฐ์„œ ๊ทธ๋Ÿผ width์™€ height๋ฅผ ์ ์šฉํ•˜๋Š” ๊ฒƒ๊ณผ flex-basis๋ฅผ ์ ์šฉํ•œ ๊ฒƒ์€ ๋ญ๊ฐ€ ๋‹ค๋ฅธ๊ฑฐ์ง€?

์•„๋ž˜์˜ ์†Œ์Šค ์ฝ”๋“œ์—์„œ๋Š” ์ž์‹ ์š”์†Œ์— height:100px๋ฅผ ์ฃผ๊ณ  ์š”์†Œ์— ๊ฐ๊ฐ width:200px๊ณผ flex-basis:200px์„ ์ ์šฉ์‹œ์ผœ๋ณด์•˜๋‹ค.

flex-direction๋Š” row๋กœ ๋˜์–ด์žˆ๊ธฐ ๋•Œ๋ฌธ์— flex-basis:200px์€ width:200px๊ณผ ๊ฐ™์€ ๊ฒฐ๊ณผ๋ฅผ ๋‚˜ํƒ€๋‚ผ ๊ฒƒ์ด๋‹ค.

.container div {
        height: 100px;
      }

      .box1 {
        width: 200px;
        background-color: lightcoral;
      }
      .box2 {
        flex-basis: 200px;
        background-color: lightsalmon;
      }
<div class="container">
      <div class="box1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum ad
        adipisci eligendi in, impedit fugiat, consequatur ullam optio iure alias
        corrupti magni ab commodi numquam facilis, sapiente error iste
        harum!dsadasdadsadadsasdadsasdadsadasdadsadadsasdadsasda
      </div>
      <div class="box2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatum ad
        adipisci eligendi in, impedit fugiat, consequatur ullam optio iure alias
        corrupti magni ab commodi numquam facilis, sapiente error iste
        harum!dsadasdadsadadsasdadsasdadsadasdadsadadsasdadsasda
      </div>
    </div>

์•„๋ž˜์˜ ๊ฒฐ๊ณผ๊ฐ€ ์–ด๋–ป๊ฒŒ ๋˜์—ˆ๋Š”์ง€ ์‚ดํŽด๋ณด๋„๋ก ํ•˜์ž.

.box1์€ width:200px์ด ๊ณ ์ •์ด ๋˜์–ด ์ฝ˜ํ…์ธ ๊ฐ€ ์š”์†Œ์˜ ์˜์—ญ์„ ๋„˜์–ด ์•„๋ž˜๋กœ ๋‚ด๋ ค๊ฐ„ ๊ฒƒ์ด ๋ณด์ธ๋‹ค.

ํ•˜์ง€๋งŒ ์•„๋ž˜ ์ด๋ฏธ์ง€์—์„œ ๋ณผ ์ˆ˜ ์žˆ๋“ฏ .box2๋Š” flex-basis:200px๊ฐ€ ์ ์šฉ๋œ ๊ธฐ๋ณธ ๋„ˆ๋น„ '200px'(๋น—๊ธˆ์นœ ๋ถ€๋ถ„)๋ณด๋‹ค ๋” ๋งŽ์€ ์˜์—ญ(ํ™”์‚ดํ‘œ ๋ถ€๋ถ„)์„ ์ฐจ์ง€ํ•˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์ด๋ฅผ ๋ณด๋ฉด width๋ฅผ ์ ์šฉํ•˜๋ฉด ๊ฐ•์ œ์ ์ธ ๊ณ ์ •๊ฐ’์œผ๋กœ ๋”ฑ ๊ทธ ๋งŒํผ์˜ ์˜์—ญ๋งŒ์„ ์ฐจ์ง€ํ•˜๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๊ณ , flex-basis๋Š” ์ฝ˜ํ…์ธ ์˜ ์˜์—ญ์— ๋”ฐ๋ผ ์œ ๋™์ ์œผ๋กœ ๋ณ€ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

๋’ค์— ์š”์†Œ๊ฐ€ ๋” ์žˆ๋”๋ผ๋„ ๊ฒน์น˜์ง€ ์•Š๊ณ  ์ด์–ด์„œ ์ •๋ ฌ์ด ๋˜๋Š” ๊ฒƒ๋„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

๊ทธ๋ฆฌ๊ณ  flex-basis๊ฐ€ ๊ธฐ๋ณธ๊ฐ’์ธ auto๊ฐ€ ์•„๋‹ˆ๊ณ  ๊ทธ ์™ธ์˜ ์ˆ˜์น˜๊ฐ€ width์™€ ๋™์‹œ์— ์ ์šฉ๋˜์–ด ์žˆ๋‹ค๋ฉด flex-basis๋ฅผ ์šฐ์„ ์ ์œผ๋กœ ์ ์šฉํ•œ๋‹ค.

์œ„์˜ ์ด๋ฏธ์ง€์ฒ˜๋Ÿผ width๋งŒ ์„ค์ •ํ–ˆ์„ ๋•Œ๋Š” ์ ์šฉํ•œ ๊ณ ์ •๊ฐ’๋งŒ ์œ ์ง€ํ•˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

flex-basis:200px์„ ํ•จ๊ป˜ ์ ์šฉํ–ˆ์„ ๋•Œ๋Š” "200px"๋กœ ๋ฐ”๋€ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์—ฌ๊ธฐ์„œ ๋‚˜์˜ ์˜๋ฌธ์  : width์™€ flex-basis๊ฐ€ ๋™์‹œ์— ์ ์šฉ์ด ๋˜์—ˆ์„ ๋•Œ flex-basis๊ฐ€ ์šฐ์„ ์ ์šฉ์ด ๋˜๋Š”๋ฐ ์™œ ์ฝ˜ํ…์ธ  ์˜์—ญ๋งŒํผ ๋Š˜์–ด๋‚˜์ง€ ์•Š์„๊นŒ?

์œ„์˜ ์†Œ์Šค์ฝ”๋“œ์˜ ๊ฒฐ๊ณผ๋ฅผ ๋‹ค์‹œ ํ•œ๋ฒˆ ๋ณด์ž.

์—ฌ๊ธฐ์„œ 2๋ฒˆ์งธ ๋ฐ•์Šค๋Š” flex-basis: 200px๋งŒ ์ ์šฉ๋˜์–ด์žˆ๋‹ค. ํ•˜์ง€๋งŒ '200px'์ด ์•„๋‹Œ ์•„๋ž˜์˜ ๊ฒฐ๊ณผ์ฒ˜๋Ÿผ ์ฝ˜ํ…์ธ ์˜ ํฌ๊ธฐ๋งŒํผ ๋Š˜์–ด๋‚œ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์—ฌ๊ธฐ์„œ ๋™์‹œ์— width:200px์„ ์ ์šฉํ–ˆ์„ ๋•Œ ๊ฒฐ๊ณผ๋Š” ์ฝ˜ํ…์ธ ์˜ ํฌ๊ธฐ๋งŒํผ ๋Š˜์–ด๋‚˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ ์•„๋ž˜์˜ ์ด๋ฏธ์ง€์ฒ˜๋Ÿผ '200px'์ด ์ ์šฉ์ด ๋˜๊ณ  ์ฝ˜ํ…์ธ ๊ฐ€ ์˜์—ญ์˜ ๋ฐ–์œผ๋กœ ๋‚˜๊ฐ€๋ฒ„๋ฆฐ๋‹ค.

๊ณต์‹๋ฌธ์„œ์— ๋”ฐ๋ฅด๋ฉด, flex-basis์™€ width/height๊ฐ€ ์ ์šฉ์ด ๋  ๋•Œ๋Š” ์šฐ์„ ์ ์œผ๋กœ flex-basis๋ฅผ ์ ์šฉํ•œ๋‹ค๊ณ  ํ•˜๋Š”๋ฐ ๋ฐ”๋กœ ์œ„์˜ ์ด๋ฏธ์ง€๋ฅผ ๋ณด๋ฉด width๊ฐ€ "200px"๋กœ ๊ณ ์ •๋˜์–ด ์ฝ˜ํ…์ธ ๊ฐ€ ์š”์†Œ์˜ ์˜์—ญ ๋ฐ–์œผ๋กœ ๋‚˜๊ฐ€๋ฒ„๋ฆฐ๋‹ค.

์ด ๋ถ€๋ถ„์— ๋Œ€ํ•ด์„œ ์•„์ง ์ดํ•ด๊ฐ€ ์•ˆ๋˜๋Š” ๋ถ€๋ถ„์ด ์žˆ์–ด์„œ ์ถ”ํ›„์— ์•Œ์•„๋ณด๊ณ  ๋‚ด์šฉ์„ ์ถ”๊ฐ€ํ•˜๋„๋ก ํ•˜๊ฒ ๋‹ค.




- flex-grow

flex-basis์˜ ๊ฐ’์—์„œ ๋” ๋Š˜์–ด๋‚˜๋„ ๋˜๋Š”์ง€ ์ง€์ •ํ•˜๋Š” ์†์„ฑ์ด๋‹ค. ์†์„ฑ์˜ 0๋ณด๋‹ค ๊ฐ’์œผ๋กœ๋Š” ์Œ์ˆ˜๊ฐ’์€ ํ—ˆ์šฉ๋˜์ง€ ์•Š๋Š”๋‹ค.

flex-grow์˜ ํŠน์ง•์€ ์ปจํ…Œ์ด๋„ˆ์˜ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ์˜์—ญ์„ ์–ด๋–ค ๋น„์œจ๋กœ ๊ฐ€์งˆ ๊ฒƒ์ธ์ง€ ์ •ํ•  ์ˆ˜ ์žˆ๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

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

๊ทธ๋ž˜์„œ ์ฝ˜ํ…์ธ ๋ฅผ ์ œ์™ธํ•œ ๋‚˜๋จธ์ง€ ์˜์—ญ์€ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ์˜์—ญ์ด๋‹ค.
์ฆ‰, "๋‚ด๋ถ€ ์š”์†Œ๊ฐ€ ๋‚˜๋ˆ„์–ด ๊ฐ€์งˆ ์˜์—ญ"์ด๋ผ๋Š” ๊ฒƒ์ด๋‹ค.

<style>
.box1 {
        flex-grow: 1;
        background-color: lightcoral;
      }
      .box2 {
        background-color: lightsalmon;
      }
      .box3 {
        background-color: lightskyblue;
      }
</style>

์šฐ์„  ๋‚ด๊ฐ€ ์ดํ•ดํ•œ ๋ฐ”๋กœ๋Š” flex-grow๊ฐ€ ์ง€์ •๋œ ์š”์†Œ๋“ค๋งŒ ์ปจํ…Œ์ด๋„ˆ ์š”์†Œ์˜ ์—ฌ๋ฐฑ ๊ณต๊ฐ„์„ ๋‚˜๋ˆ ๊ฐ€์ง€๋Š” ๊ฒƒ์œผ๋กœ ์ดํ•ดํ–ˆ๋‹ค.

๊ทธ๋ž˜์„œ ์œ„์˜ ์†Œ์Šค์ฝ”๋“œ์ฒ˜๋Ÿผ ์š”์†Œ ์ค‘ ์ฒซ๋ฒˆ์งธ ์š”์†Œ ํ˜ผ์ž flex-grow๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉด ์•„๋ž˜์˜ ๊ฒฐ๊ณผ์ฒ˜๋Ÿผ ํ˜ผ์ž ์ปจํ…Œ์ด๋„ˆ์˜ ์—ฌ๋ฐฑ ๊ณต๊ฐ„์„ ๋‹ค ์ฐจ์ง€ํ•˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์ด์ œ ๋‹ค๋ฅธ ์š”์†Œ์—๋„ flex-grow๋ฅผ ๋„ฃ์–ด๋ณด๋„๋ก ํ•˜์ž.

<style>
.box1 {
        flex-grow: 1;
        background-color: lightcoral;
      }
      .box2 {
      	flex-grow: 2;
        background-color: lightsalmon;
      }
      .box3 {
      	flex-grow: 1;
        background-color: lightskyblue;
      }
</style>

์œ„์˜ ์†Œ์Šค์ฝ”๋“œ์˜ ์˜๋ฏธ๋Š” box1์€ ์ปจํ…Œ์ด๋„ˆ ์˜์—ญ์˜ 4๋ถ„์˜ 1์„ ์ฐจ์ง€, box2๋Š” 4๋ถ„์˜ 2๋ฅผ ์ฐจ์ง€, box3์€ 4๋ถ„์˜ 1์„ ์ฐจ์ง€๋Š” ๊ฒƒ์ด๋‹ค.

์—ฌ๊ธฐ์„œ ์ดํ•ดํ•ด์•ผํ•˜๋Š” ์ ์€ ์š”์†Œ์˜ ์ถ”๊ฐ€๋œ ์—ฌ๋ฐฑ๊ณต๊ฐ„์˜ ๊ตฌ๋ถ„์„ ์ž˜ํ•ด์•ผํ•œ๋‹ค.
์—ฌ๋ฐฑ๊ณต๊ฐ„์€ ์š”์†Œ์˜ ์ „์ฒด์˜ ํฌ๊ธฐ๊ฐ€ ์•„๋‹Œ ์•„๋ž˜์˜ ์ ์„ ์œผ๋กœ ๋œ ์‚ฌ๊ฐํ˜•์ฒ˜๋Ÿผ ์—ฌ๋ฐฑ๋งŒ ์ถ”๊ฐ€๋œ๋‹ค๋Š” ๊ฒƒ์„ ์•Œ๊ณ  ์žˆ์–ด์•ผ ํ•œ๋‹ค.

์ •ํ™•ํžˆ ์—ฌ๋ฐฑ์ด ๋น„์œจ์— ๋งž๊ฒŒ ๋“ค์–ด๊ฐ”๋Š”์ง€ ๊ณ„์‚ฐ์„ ํ•œ๋ฒˆ ํ•ด๋ณด๋„๋ก ํ•˜์ž.
์šฐ์„  ์ž„์˜๋กœ ๋ฐ•์Šค์— width:100px์„ ์ค˜์„œ ์ „์ฒด ๋„ˆ๋น„์˜ -100px์„ ํ•˜๋ฉด ์ „์ฒด ์—ฌ๋ฐฑ์ด ๋‚˜์˜ฌ ๊ฒƒ์ด๋‹ค.

  • box1 : 351.25 - 100 = 251.25px

  • box2 : 602.5 - 100 = 502.5px

  • box3 : 351.25 - 100 = 251.25px

๊ฒฐ๊ณผ์ ์œผ๋กœ 251.25 : 502.5 : 251.25๋กœ 1:2:1 ๋น„์œจ๋กœ ๋งž๊ฒŒ ์—ฌ๋ฐฑ ๊ณต๊ฐ„์ด ๋“ค์–ด๊ฐ„ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.




- flex-shrink

flex-shrink๋Š” flex-grow์™€ ๋ฐ˜๋Œ€์˜ ๊ฐœ๋…์œผ๋กœ flex-basis์˜ ๊ฐ’์—์„œ ์ค„์–ด๋“ค์–ด๋„ ๋˜๋Š”์ง€์— ๋Œ€ํ•œ ์†์„ฑ์ด๋‹ค. ๋ชจ๋“  ์ปจํ…Œ์ด๋„ˆ ๋‚ด๋ถ€์˜ ๋ฐ•์Šค ์š”์†Œ์˜ ๊ธฐ๋ณธ๊ฐ’์€ "1"์ด๋‹ค.

์•„๋ž˜์˜ ์†Œ์Šค์ฝ”๋“œ๋Š” ๋ชจ๋“  ๋‚ด๋ถ€ ์š”์†Œ์— flex-basis๋ฅผ ์ด์šฉํ•˜์—ฌ ์ดˆ๊ธฐ์˜ ํฌ๊ธฐ๋ฅผ ์ •ํ•ด์ฃผ๊ณ  flex-shrink์˜ ์˜ํ–ฅ์œผ๋กœ ์–ด๋–ป๊ฒŒ ์ค„์–ด๋“œ๋Š”์ง€ ๋ณด์—ฌ์ฃผ๋Š” ์˜ˆ์ œ์ด๋‹ค.

<style>
.container div {
        flex-basis: 100px;
        height: 200px;
      }

      .box1 {
        flex-grow: 1;
        flex-shrink: 0;
        background-color: lightcoral;
      }
      .box2 {
        flex-grow: 2;
        flex-shrink: 1;
        background-color: lightsalmon;
      }
      .box3 {
        flex-grow: 1;
        flex-shrink: 1;
        background-color: lightskyblue;
      }
</style>

ํ•œ๋ฒˆ ํ™”๋ฉด์˜ ํฌ๊ธฐ๋ฅผ ์ค„์—ฌ๋ณด๋„๋ก ํ•˜์ž.

flex-shrink:0์„ ์ ์šฉ์‹œํ‚จ ์ฒซ๋ฒˆ์งธ ๋ฐ•์Šค๋Š” flex-basis๋กœ ์„ค์ •ํ•œ ์ดˆ๊ธฐ ๋ฐ•์Šค์˜ ํฌ๊ธฐ์ธ 100px๋ฅผ ํ™”๋ฉด์ด ์ค„์–ด๋„ ์ค„์–ด๋“ค์ง€ ์•Š๋Š”๋‹ค.

๊ทธ์™ธ์˜ flex-grow:2๋ฅผ ์ ์šฉ์‹œํ‚จ ๊ฐ€์žฅ ํฐ ๋‘๋ฒˆ์งธ ๋ฐ•์Šค๋Š” flex-grow:1์„ ์ ์šฉ์‹œํ‚จ ์„ธ๋ฒˆ์งธ ๋ฐ•์Šค๋ณด๋‹ค ๋น ๋ฅธ ์†๋„๋กœ ์ค„์–ด๋“ค๊ณ  ์žˆ๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์ฆ‰, flex-shrink:0์€ flex-basis์—์„œ ์„ค์ •ํ•œ ๊ฐ’์„ ํ™”๋ฉด์ด ์ค„์–ด๋“ค์–ด๋„ ๊ณ ์ •ํ•˜๋Š” ๊ฒƒ์ด๊ณ  flex-shrink๊ฐ€ 1์ด์ƒ ์ผ์‹œ์—” ์ค„์–ด๋“œ๋Š” ๊ฒƒ์œผ๋กœ ๋ณผ ์ˆ˜ ์žˆ๊ฒ ๋‹ค.

- ์ถ•์•ฝํ˜• flex ์†์„ฑ

์œ„์—์„œ ์ •๋ฆฌํ•œ ์„ธ ์†์„ฑ์„ ํ•œ๋ฒˆ์— ์ž‘์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ์ถ•์•ฝํ˜• ์†์„ฑ์ธ flex์ด๋‹ค.

flex: <flex-grow> <flex-shrink> <flex-basis>

์ถ•์•ฝํ˜•์˜ ๊ทœ์น™์€ MDN์— ์žˆ๋Š” ์•„๋ž˜์˜ ์ด๋ฏธ์ง€์ฒ˜๋Ÿผ ์ž‘์„ฑํ•ด์•ผํ•œ๋‹ค.

์˜ˆ๋ฅผ ๋“ค๋ฉด,

flex: 1์ด๋ฉด flex-grow๋งŒ 1์ด ์ ์šฉ๋˜์–ด flex-grow:1, ๋‚˜๋จธ์ง€ ์†์„ฑ์€ ๊ธฐ๋ณธ๊ฐ’์œผ๋กœ flex-shrink:1, flex-basis: auto๊ฐ€ ๋œ๋‹ค.

flex: 1 2์ด๋ผ๋ฉด flex-grow:1, flex-shrink:2, flex-basis: auto๊ฐ€ ๋œ๋‹ค.

flex: 1 200px์ด๋ผ๋ฉด flex-grow:1, ๊ธฐ๋ณธ๊ฐ’์ธ flex-shrink:1, flex-basis:200px์ด ๋œ๋‹ค. 200px์ฒ˜๋Ÿผ ๋‹จ์œ„๊ฐ€ ์žˆ๋Š” length๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ˆ˜์น˜๋Š” flex-basis์˜ ์†์„ฑ๊ฐ’์œผ๋กœ ์ ์šฉ์ด ๋œ๋‹ค.

flex: 1 2 200px์ด๋ผ๋ฉด flex-grow:1, flex-shrink:2, flex-basis:200px์ด ๋œ๋‹ค.

- align-self

์ด๋Ÿฐ ์ƒํ™ฉ์ด ์˜ฌ ์ˆ˜๋„ ์žˆ๋‹ค. display:flex๋ฅผ ์ ์šฉ์‹œํ‚จ ์ƒํƒœ์—์„œ ๋‹ค๋ฅธ ์š”์†Œ๋ง๊ณ  ์ง€์ •ํ•œ ์š”์†Œ์—๋งŒ ๋‹ค๋ฅธ flex์†์„ฑ๊ฐ’์„ ์ฃผ๊ณ  ์‹ถ์„ ๋•Œ, ๊ทธ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ์†์„ฑ์ด align-self์ด๋‹ค.

๊ทธ๋ฆฌ๊ณ  ์ค‘์š”ํ•œ ์ ์€ align์ด๊ธฐ ๋•Œ๋ฌธ์— align-items์ฒ˜๋Ÿผ Cross-axis๋ฅผ ๊ธฐ์ค€์œผ๋กœ ํ•˜๋Š” ๊ฒƒ์„ ์•Œ ์ˆ˜ ์žˆ๋‹ค.

align-self๋Š” align-items์˜ ์†์„ฑ๊ฐ’์„ ๋ชจ๋‘ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

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

์œ„์˜ ์ด๋ฏธ์ง€๋ฅผ ๋ณด๋ฉด ๊ฐ๊ฐ ์ ์šฉํ•œ ๊ฐ’์— ๋”ฐ๋ผ ์š”์†Œ์˜ ๊ฒฐ๊ณผ๊ฐ€ ๋‹ค๋ฅธ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
ํด๋ž˜์Šค๋ฅผ ์„ค์ •ํ•ด์„œ ๋ณต์ˆ˜์˜ ์š”์†Œ์— ์ ์šฉํ•  ์ˆ˜๋„ ์žˆ๋‹ค.

5๊ฐœ์˜ ๋ฐ•์Šค ์š”์†Œ ์ค‘ .selected๋ผ๋Š” ํด๋ž˜์Šค๋ฅผ ์„ค์ •ํ•˜์—ฌ 3๋ฒˆ์งธ์™€ 4๋ฒˆ์งธ ๋ฐ•์Šค ์š”์†Œ๋ฅผ ์ง€์ •ํ•ด์„œ ์ ์šฉํ•ด๋ณด์•˜๋‹ค.

.selected {
        align-self: center;
      }
<div class="container">
      <div class="box1">box1</div>
      <div class="box2">box2</div>
      <div class="box3 selected">box3</div>
      <div class="box4 selected">box4</div>
      <div class="box5">box5</div>
</div>

์—ฌ๋Ÿฌ๋ชจ๋กœ ๋ ˆ์ด์•„์›ƒ์„ ๊ตฌ์„ฑํ• ๋•Œ ํ™œ์šฉํ•˜๋ฉด ์ข‹์„ ๊ฒƒ ๊ฐ™๋‹ค.

- order

order์€ ๋‚ด๋ถ€ ์š”์†Œ๊ฐ„์˜ ์ •๋ ฌ์˜ ์ˆœ์„œ๋ฅผ ๋ฐ”๊ฟ€ ์ˆ˜ ์žˆ๋Š” ์†์„ฑ์ด๋‹ค.

๋‚ด๋ถ€ ์š”์†Œ์— order ์†์„ฑ์„ ์ ์šฉ์‹œํ‚จ๋‹ค.

<style>
.box1 {
        order: 3;
        background-color: lightcoral;
      }
      .box2 {
        order: 4;
        background-color: lightsalmon;
      }

      .box3 {
        order: 5;
        background-color: lightskyblue;
      }

      .box4 {
        order: 1;
        background-color: lightgreen;
      }

      .box5 {
        order: 2;
        background-color: lightseagreen;
      }
</style>

์œ„์˜ ์ด๋ฏธ์ง€๋ฅผ ๋ณด๋ฉด order์— ๋”ฐ๋ผ ์ˆœ์„œ๊ฐ€ ๋ฐ”๋€ ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
๋‹น์—ฐํžˆ flex-direction์ด *-reverse๋ผ๋ฉด ๋ฐ˜๋Œ€์˜ ์ˆœ์„œ๋กœ ์ •๋ ฌ์ด ๋  ๊ฒƒ์ด๋‹ค.




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

flex๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด์„œ ์ž˜ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜๋˜ ์†์„ฑ์ด๊ธฐ์— ์ •๋ณด๋ฅผ ๊ฒ€์ƒ‰ํ•ด๋ณด๊ณ  ์‹ค์Šต์„ ํ•ด๋ณด๊ณ  ์˜ค๋žœ ์‹œ๊ฐ„์ด ๊ฑธ๋ ธ๋‹ค.
์•„์ง๋„ ์ดํ•ดํ•˜์ง€ ๋ชปํ•œ ์†์„ฑ์ด ์žˆ์–ด ๊พธ์ค€ํžˆ ๋‹ค์‹œ ๋ด์•ผํ•  ๊ฒƒ ๊ฐ™๋‹ค .
๋ฌผ๋ก  ์‚ฌ์šฉํ•˜์ง€ ์•Š์„ ๊ฒฝ์šฐ๊ฐ€ ๋” ๋งŽ์ง€๋งŒ ๋‚ด๊ฐ€ ํ™•์‹คํžˆ ์•ˆ๋‹ค๋ฉด ํ™œ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๋ฒ”์œ„๋„ ๋” ๋Š˜์–ด๋‚ ํ…Œ๋‹ˆ๊นŒ..!

๋ฒŒ์จ ์ฃผ๋ง์ด ๋๋‚ฌ๋‹ค. TIL๋ฅผ ์“ฐ๋ฉด ํ•˜๋ฃจ๊ฐ€ ์–ด๋–ป๊ฒŒ ๊ทธ๋ ‡๊ฒŒ ๋นจ๋ฆฌ๊ฐ€๋Š”์ง€.. ์—ด์‹ฌํžˆ ๊ณต๋ถ€ํ•˜๊ณ  ์žˆ๋‹ค๋Š” ์ฆ๊ฑฐ์ด๊ฒ ์ง€ ๋ผ๋Š” ์ƒ๊ฐ์— ๋‹ค์Œ ์ฃผ๋„ ์—ด์‹ฌํžˆ ํ•˜์ž๋ผ๋Š” ๋‹ค์ง์„ ํ•˜๊ฒŒ ๋œ๋‹ค.

๋‹ค์Œ ์ฃผ๋„ ํ™”์ดํŒ…์ด๋‹ค! ๐Ÿ’ช

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