flex-basis:auto;
๊ธฐ๋ณธ๊ฐ์ผ๋ก width, height ๊ฐ ์ฌ์ฉflex-basis : 0
๊ธฐ๋ณธ ๋์ด ์๋ค๋ ๊ฒ, ์๋ ๋ด๊ฐ ๊ฐ์ง ํฌ๊ธฐ ์ด๊ธฐํ๐ก 0 ์ธ์ ๋ค๋ฅธ ์์๊ฐ์ ์ฌ์ฉํ ์ ์์.
flex-basis์ ๊ฐ๋ณด๋ค ๋ ๋์ด๋๋ ๋๋์ง ์ง์ ํ๋ ๊ฐ์ผ๋ก,
ํ ๋น๋ ๊ฐ์ ๋ฐ๋ผ ์์ ์ ๊ฐ์ธ๋ ์ปจํ
์ด๋์ ๊ณต๊ฐ(์ฌ๋ฐฑ)์ ํ ๋น.
flex-growย : 1 โ> ์์ ์์๋ค์ด ๋ชจ๋ ๋์ผํ ํฌ๊ธฐ์ ๊ณต๊ฐ์ ํ ๋น๋ฐ์.
flex-growย : 2 โ>ย ํน์ ํ ํ๋์ ์์์๊ฒ๋ง ์ค ๊ฒฝ์ฐ ๋ค๋ฅธ ์์์์๋ณด๋ค ๋๋ฐฐ์ ์ฌ๋ฐฑ ๊ณต๊ฐ์ ํ ๋น๋ฐ์. ๋ง์ฝ ์์์์๋ค์ ์ปจํ ์ธ ํฌ๊ธฐ๊ฐ ์กด์ฌํ๋ค๋ฉด ๊ทธ ์ปจํ ์ธ ์ ๋์ด์ ๋ฐ๋ผ ํ ๋น๋ฐ๋ ๊ฐ์ด ๋ฌ๋ผ์ง.
๐ก flex-basis:0์ ์ฃผ๊ฒ ๋๋ฉด ์ฌ๋ฐฑ ๊ณต๊ฐ์ด ์๋๋ผ ์ ์ฒด ๊ณต๊ฐ์ ๋ถํ ํฉ๋๋ค.
flex-grow์ ๋ฐ๋๋๋ ๊ฐ๋
์ผ๋ก
์์ดํ
์ด flex-basis์ ๊ฐ๋ณด๋ค ์์์ง ์ ์๋์ง ๊ฒฐ์
ํฌ๊ธฐ๋ฅผ ๊ณ ์ ํ๊ฑฐ๋ ์ค์ด๋ ์ญํ
๋ง์ด๋์ค ์ซ์๋ ๋ฐ์๋ค์ด์ง ์์.
flex-shrink:0;
์ค์ด๋ค์ง ์์. (์ปจํ
์ด๋์ ํฌ๊ธฐ๊ฐ ์ค์ด๋ ๊ฐ์ ๊ณ ์ ) flex-shrink:1;
์ค์ด๋ฆ. (๊ธฐ๋ณธ๊ฐ)๐ก ๋ถ๋ชจ์ flex-wrap: wrap; ์์ฑ์ด ์๋ ๊ฒฝ์ฐ ์ ์ฉ๋์ง ์์ต๋๋ค.
/* flex: flex-grow, flex-shrink, flex-basis */
flex :1; /* flex-grow:1; flex-shrink:1; flex-basis:0; */
flex :1 1 300px; /* flex-grow:1; flex-shrink:1; flex-basis:300px; */