๐ flexbox๋?
์ฌ๋ฌ๊ฐ์ง ์์๋ค(html ํ๊ทธ)์, ์์ ์์ฌ๋ก ๋์์ธ ํ ์ ์๋๋ก ๋ง๋ ๋ฐ์ค
flexbox ๋ด๋ถ์ ์์๋ค์, flexbox์ ๊ท์น์ ๊ธฐ์ค์ผ๋ก ์์น์, ํฌ๊ธฐ๋ฅผ ๊ฒฐ์ ํ๋ค.
display: flex; ๋ฅผ ์ฌ์ฉํ์ฌ flexbox๋ฅผ ์ง์ ํ ์ ์๋ค.
// HTML
<html>
<head>
</head>
<body>
<div class="container">
<div>์๋
</div>
<div>ํ์ธ์</div>
<div>?</div>
</div>
</body>
</html>// CSS
.container {
display: flex;
}
๐ flex-shrink ๋?
flexbox์ ๊ณต๊ฐ์ด ๋ถ์กฑํ ๋, ๊ฐ ํญ๋ชฉ์ ์ฌ์ด์ฆ๋ฅผ ์ค์ธ๋ค.
ํญ๋ชฉ : flex-item ์์ ( display : flex๊ฐ ์ ์ฉ๋ Container ๋ด๋ถ ์์ )
flex-shrink ์ฌ์ฉ๋ฒ
1. flex-shrink : 0 ( ์ค์ด์ง ์๊ณ , ์๋ณธ ์ฌ์ด์ฆ๋ก ์ฌ์ฉ )
{
flex-shrink: 0;
}2. border-box ( 1๋งํผ ์ค์ฌ์ ์ฌ์ฉ )
{
flex-shrink: 1;
}
๐ flex-grow ๋?
flexbox์ ๊ณต๊ฐ์ด ๋ถ์กฑํ ๋ ์ ํํ ํญ๋ชฉ์ ํฌ๊ธฐ๋ฅผ ๋๋ฆฌ๊ณ , ๋ค๋ฅธ ํญ๋ชฉ์ ํฌ๊ธฐ๋ฅผ ์ค์ธ๋ค.
( ๋๋จธ์ง ์์์ n๋ฐฐ๊ฐ ๋๋๋ก )
ํญ๋ชฉ : flex-item ์์ ( display : flex๊ฐ ์ ์ฉ๋ Container ๋ด๋ถ ์์ )
flex-grow ์ฌ์ฉ๋ฒ
1. flex-grow : 1 ( ์ซ์๊ฐ ์ปค์ง์๋ก, ํด๋นํญ๋ชฉ์ ํฌ๊ธฐ๊ฐ ์ปค์ง )
{
flex-grow: 1;
}๋ฐ์ํ
