Flexbox

Flexbox ๋ ˆ์ด์•„์›ƒ ์‚ฌ์šฉ๋ฒ•

<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
</div>
.flex-container {
  display : flex;
}
.box {
  width : 100px;
  height : 100px;
  background : grey;
  margin : 5px;
}

๊ทธ๋ƒฅ ๋ฐ•์Šค๋“ค์„ ๊ฐ์‹ธ๋Š” ๋ถ€๋ชจ ์š”์†Œ์—๊ฒŒ display : flex๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ๋ฉ๋‹ˆ๋‹ค.

๊ทธ๋Ÿผ ๋ฐ•์Šค๋“ค์ด ๊ธฐ๋ณธ์ ์œผ๋กœ ๊ฐ€๋กœ์ •๋ ฌ๋กœ ๋ฐฐ์น˜๋ฉ๋‹ˆ๋‹ค.

(์ฐธ๊ณ ) ์ธํ„ฐ๋„ท ์ต์Šคํ”Œ๋กœ๋Ÿฌ 11 ์ด์ƒ์—์„œ ์‚ฌ์šฉ๊ฐ€๋Šฅํ•œ ์†์„ฑ์ž…๋‹ˆ๋‹ค.

11๋ฏธ๋งŒ์—์„  flex ๊ทธ๋Ÿฐ๊ฑฐ ์—†๋‹ค๊ณ  ์—๋Ÿฌ๋‚ฉ๋‹ˆ๋‹ค.

Flexbox ์„ธ๋ถ€์†์„ฑ ์‚ฌ์šฉํ•˜๊ธฐ

.flex-container {
  display : flex;
  justify-content : center;  /* ์ขŒ์šฐ์ •๋ ฌ */
  align-items : center;  /* ์ƒํ•˜์ •๋ ฌ */
  flex-direction : column; /* ์„ธ๋กœ์ •๋ ฌ */
  flex-wrap : wrap;  /* ํญ์ด ๋„˜์น˜๋Š” ์š”์†Œ wrap ์ฒ˜๋ฆฌ */
  gap: 20px;
}
.box {
  flex-grow : 2;  /* ํญ์ด ์ƒ๋Œ€์ ์œผ๋กœ ๋ช‡๋ฐฐ์ธ์ง€ ๊ฒฐ์ • */
}

์—ญ์‹œ ์™ธ์›Œ๋ดค์ž ๋‹ค์Œ๋‚  ๊นŒ๋จน๊ธฐ ๋•Œ๋ฌธ์—

ํ•„์š”ํ•  ๋•Œ๋งˆ๋‹ค ์ฐพ์•„์“ฐ๋Š”๊ฒŒ ์ผ๋ฐ˜์ ์ž…๋‹ˆ๋‹ค.

๋ฐ•์Šค ์ขŒ์ธก & ์šฐ์ธก์ •๋ ฌ ๋™์‹œ์— ํ•˜๋Š” ๋ฒ•

<div class="flex-container">
  <div class="box"></div>
  <div class="box" style="flex-grow : 1"></div>
  <div class="box"></div>
</div>

๊ทธ๋Ÿฌ๋‹ˆ๊นŒ ์ฒซ <div>๋Š” ์™ผ์ชฝ,

๋งˆ์ง€๋ง‰ <div>๋Š” ์šฐ์ธก์ •๋ ฌ์„ ํ•˜๊ณ ์‹ถ์œผ๋ฉด ์–ด๋–ป๊ฒŒ ํ•˜๋ƒ๋Š” ๊ฒ๋‹ˆ๋‹ค.

๊ทธ๊ฑด ๊ฐ€์šด๋ฐ ์ž„์‹œ <div> ํ•˜๋‚˜ ๋งŒ๋“ค์–ด์ฃผ๊ณ 

flex-grow: 1 ์ด๋Ÿฐ ์‹์œผ๋กœ ์‚ฌ์ด์ฆˆ๋ฅผ ํฌ๊ฒŒ ํ‚ค์›Œ์ฃผ๋ฉด ๋ฉ๋‹ˆ๋‹ค.

๊ทธ๋Ÿผ ์•Œ์•„์„œ ๋‚˜๋จธ์ง€ ์š”์†Œ๋“ค์€ ์ขŒ์ธก ์šฐ์ธก์œผ๋กœ ํผ์ง‘๋‹ˆ๋‹ค.

Last updated