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