๐ ์ค๋ ๋ฐฐ์ด ๋ด์ฉ
flex-direction ์์ฑ์ ๋ถ๋ชจ ์์์ ์ค์ ํด์ฃผ๋ ์์ฑ์ผ๋ก, ์์ ์์๋ค์ ์ ๋ ฌํ ์ ๋ ฌ ์ถ์ ์ ํฉ๋๋ค. ์๋ฌด ์ค์ ๋ ํด์ฃผ์ง ์์ผ๋ฉด ๊ธฐ๋ณธ์ ์ผ๋ก ๊ฐ๋ก ์ ๋ ฌ์ ํฉ๋๋ค.
flex-wrap ์์ฑ์ ํ์ ์์๋ค์ ํฌ๊ธฐ๊ฐ ์์ ์์์ ํฌ๊ธฐ๋ฅผ ๋์ผ๋ฉด ์๋ ์ค ๋ฐ๊ฟ์ ํ ๊ฒ์ธ์ง ์ ํฉ๋๋ค. ์ค์ ํด ์ฃผ์ง ์์ผ๋ฉด ์ค ๋ฐ๊ฟ์ ํ์ง ์์ต๋๋ค.
justify-content ์์ฑ์ ์์ ์์๋ค์ ์ถ์ ์ํ ๋ฐฉํฅ์ผ๋ก ์ด๋ป๊ฒ ์ ๋ ฌํ ๊ฒ์ธ์ง ์ ํฉ๋๋ค. ์์๋ค์ด ๊ฐ๋ก๋ก ์ ๋ ฌ๋์ด ์๋ค๋ฉด ๊ฐ๋ก ๋ฐฉํฅ์ผ๋ก ์ด๋ป๊ฒ ์ ๋ ฌํ ๊ฒ์ธ์ง, ์ธ๋ก๋ก ์ ๋ ฌ๋์ด ์๋ค๋ฉด ์ธ๋ก ๋ฐฉํฅ์ผ๋ก ์ด๋ป๊ฒ ์ ๋ ฌํ ๊ฒ์ธ์ง ์ ํ๋ ์์ฑ์ ๋๋ค.
align-items ์์ฑ์ ์์ ์์๋ค์ ์ถ์ ์์ง ๋ฐฉํฅ์ผ๋ก ์ด๋ป๊ฒ ์ ๋ ฌํ ๊ฒ์ธ์ง ์ ํฉ๋๋ค. ์์๋ค์ด ๊ฐ๋ก๋ก ์ ๋ ฌ๋์ด ์๋ค๋ฉด ์ธ๋ก ๋ฐฉํฅ์ผ๋ก ์ด๋ป๊ฒ ์ ๋ ฌํ ๊ฒ์ธ์ง, ์ธ๋ก๋ก ์ ๋ ฌ๋์ด ์๋ค๋ฉด ๊ฐ๋ก ๋ฐฉํฅ์ผ๋ก ์ด๋ป๊ฒ ์ ๋ ฌํ ๊ฒ์ธ์ง ์ ํ๋ ์์ฑ์ ๋๋ค.
flex ์์ฑ์๋ ์ธ ๊ฐ์ง ๊ฐ์ ์ง์ ํด์ค ์ ์์ต๋๋ค. ๊ฐ ๊ฐ์ด ์๋ฏธํ๋ ๊ฒ์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
grow(ํฝ์ฐฝ ์ง์) ๋ ์์์ ํฌ๊ธฐ๊ฐ ๋์ด๋์ผ ํ ๋ ์ผ๋ง๋ ๋์ด๋ ๊ฒ์ธ์ง, shrink(์์ถ ์ง์) ๋ ์์์ ํฌ๊ธฐ๊ฐ ์ค์ด๋ค์ด์ผ ํ ๋ ์ผ๋ง๋ ์ค์ด๋ค ๊ฒ์ธ์ง, basis(๊ธฐ๋ณธ ํฌ๊ธฐ) ๋ ๋์ด๋๊ณ ์ค์ด๋๋ ๊ฒ๊ณผ ์๊ด์์ด ์์์ ๊ธฐ๋ณธ ํฌ๊ธฐ๋ ์ผ๋ง์ธ์ง๋ฅผ ์๋ฏธํฉ๋๋ค.
์์ ์์์ flex ์์ฑ์ ๋ฐ๋ก ์ค์ ํด์ฃผ์ง ์์ผ๋ฉด ๋ค์๊ณผ ๊ฐ์ ๊ธฐ๋ณธ๊ฐ์ด ์ ์ฉ๋๋ฉฐ, ์ผ์ชฝ์์๋ถํฐ ์ค๋ฅธ์ชฝ์ผ๋ก ์ฝํ ์ธ ์ ํฌ๊ธฐ๋งํผ ๋ฐฐ์น๋ฉ๋๋ค.
flex ์์ฑ ์์ ์ธ ๊ฐ์ง ๊ฐ์ ํ ๋ฒ์ ์ค์ ํด์ค ํ์ ์์ด, ๋ค์๊ณผ ๊ฐ์ด ๊ฐ ๊ฐ์ ๋ฐ๋ก ์ง์ ํด์ค ์ ์์ต๋๋ค.
โ๏ธ ํจ์ด ํ๋ก๊ทธ๋๋ฐ
๊ณ์ฐ๊ธฐ ๋ชฉ์
1. ์์ด์ดํ๋ ์
2. html ๊ตฌ์กฐ ์ก๊ธฐ
3. ์คํ์ผ์ํธ
๐ ํ๊ณ
ํฌ๋ฆฌ์ค๋ง์ค ์ด๋ธ ์ ๋ ๊ฐ์ ๊ฐ์ธ์ผ๋ก ํ์ดํ๋์ ํ์ง๋ชปํ๊ณ ๋ค์์ฃผ ์์์ผ ๋ฏธ๋ค๊ธฐ์ ํผ์์ ํ๋์ ์ง๋ณด์๋ค. ์ญ์๋ css ํญ์ ์ด๋ ค์ด๊ฑธ ๋๋ผ๊ฒ ๋๊ณ html ์์๋ ๋จธ๋ฆฟ์์์ tabla ํ๊ทธ๋ก ํ ๊น button, span, data-์์ฑ ์๋๋ฉด css์์ grid๋ก ํ์ ์ก์๊น ์ฌ๋ฌ ๋ฐฉํฅ์ ํตํด์ ์๋๋ฅผ ํด๋ด์ผ๊ฒ ๋ค๋ ์์์ด ๋ถํ์ฌ๋๋ค.
๋ค์์ฃผ ํ์ด๋ถ๊ณผ ์ ์๋ ผํด์ ์ข์ ๊ฒฐ๊ณผ๋ฌผ์ ๋ด๋ณด๋๋ก...