4. Flex
Flex Box
Flexbox๋ ๋ชจ๋ ์น์ ์ํ์ฌ ์ ์๋ layout ๋ฐฉ์์ด๋ค.
Flexbox ๋ ์ด์์์ flex-container(๋ถ๋ชจ์์) ์ flex-item(์์ ์์๋ค)๋ก ๊ตฌ์ฑ๋๋ค.
Flexbox๋ฅผ ์ฌ์ฉํ๊ธฐ ์ํด์ HTML ๋ถ๋ชจ ์์์ display ์์ฑ์ flex๋ฅผ ์ง์ ํ๋ค.
๋ถ๋ชจ ์์๊ฐ inline ์์์ธ ๊ฒฝ์ฐ inline-flex์ ์ง์ ํ๋ค.
Flex ๋ flex-container ์์ฑ๊ณผ flex-item ์์ฑ์ผ๋ก ๋๋๋ค.
flex container ์ ์ ์ฉํ๋ ์์ฑ
display: flex
flex-direction
flex-wrap
flex-flow
jutify-content
align-items
align-content
display: flex
์ปจํ ์ด๋๋ฅผ ํ๋์ค ์ปจํ ์ด๋๋ก ๋ง๋ ๋ค.
flex-direction
ํ๋์ค ์ปจํ ์ด๋์ ๋ฐฐ์น ์ถ์ ๊ฒฐ์ ํ๋ค.
flex-wrap
ํ๋์ค ์ปจํ ์ด๋ ์์ ์์ดํ ์ ์ค๋ฐ๊ฟ์ ์ง์ ํ๋ค. ์ฆ, ์ปจํ ์ด๋์ ๋๋น๋ณด๋ค, item๋ค ๋๋น์ ํฉ์ด ํด ๊ฒฝ์ฐ, ์์ดํ ๋ค์ด ์ค๋ฐ๊ฟ ๋๋ ๊ฒ์ ์ง์ ํ๋ค. nowrap ์ overflow: auto ๋ฅผ ์ง์ ํ๋ฉด ๊ฐ๋ก๋ก ์คํฌ๋กค์ด ์๊ธด๋ค. ์ปจํ ์ด๋๋ฅผ ๋์น์ง ์๊ฒ ๋๋ค.
flex-flow
flex-direction ๊ณผ flex-wrap ์์ฑ์ ํ ๋ฒ์ ์ง์ ํ๋ค.
justify-content
ํ๋์ค ์ปจํ ์ด๋์ ์ฃผ์ถ ๋ฐฉํฅ์ผ๋ก ํ๋์ค ์์ดํ ๋ค์ ๋ฐฐ์น๋ฅผ ๊ฒฐ์ ํ๋ค.
align-items
ํ๋์ค ์ปจํ ์ด๋์ ์ฃผ์ถ์ ๋ฐ๋์์, ํ๋์ค ์์ดํ ๋ค์ ์ ๋ ฌ์ ์ง์ ํ๋ค.
align-content
wrap์ด ์ ์ฉ๋์ด multiline ์ธ ๊ฒฝ์ฐ์๋ง ์ ์ฉ๋๋ฉฐ, ํ ์ค๋ง ์๋ ์ํ์์๋ ํจ๊ณผ๋ฅผ ๋ณด์ด์ง ์๋๋ค.
gap
ํ๋์ค ์์ดํ ๋ค ์ฌ์ด์ ๊ฐ๊ฒฉ์ ๋ช ์์ ์ผ๋ก ์ ์ดํ๋ค. ๋ฐ๊นฅ์ชฝ ๊ฐ์ฅ์๋ฆฌ์ ์์ง ์์ ํญ๋ชฉ ์ฌ์ด์๋ง ๊ฐ๊ฒฉ์ ์ ์ฉํ๋ค. gap ์ Grid๋ ๋ค์ค ์ด ๋ ์ด์์์์๋ ์๋ํ๋ค.
flex item ์ ์ ์ฉํ๋ ์์ฑ
float, clear, vertical-align ์์ฑ์ flex item์ ์ํฅ์ ์ฃผ์ง ์๋๋ค.
order
flex-grow
flex-shrink
flex-basis
align-self
order
์์ดํ ์ ๋ฐฐ์น ์์๋ฅผ ์ง์ ํ๋๋ฐ, ๋ฐฐ์น์ ์์๋ ์ปจํ ์ด๋์ ์ถ๊ฐ๋ ์์์ด๋ค. ์ ์ ๊ฐ(์์ ๊ฐ๋ฅ)์ผ๋ก ์ง์ ํ๋ฉฐ ๊ธฐ๋ณธ ๊ฐ์ 0์ด๋ค.
flex-grow
์์ดํ ์ ๋๋น์ ๋ํ ํ๋ ์ธ์๋ฅผ ์ง์ ํ๋ค. ์์ ์ ์ ๊ฐ์ ์ฌ์ฉํ๋ฉฐ ๊ธฐ๋ณธ ๊ฐ์ 0์ด๋ค. ๋ชจ๋ ์์ดํ ์ด ๋์ผํ flex-grow ๊ฐ์ด๋ผ๋ฉด ๋์ผํ ๋๋น๋ฅผ ๊ฐ๋๋ค. (flex-grow: 1)
flex-shrink
์์ดํ ์ ๋๋น์ ๋ํ ์ถ์ ์ธ์๋ฅผ ์ง์ ํ๋ค. ๊ธฐ๋ณธ ๊ฐ์ 1์ด๊ณ ์์ ๊ฐ์ ์ฌ ์ ์๋ค. 0์ ์ง์ ํ๋ฉด ์ถ์๊ฐ ํด์ ๋์ด ์๋์ ๋๋น๋ฅผ ์ ์งํ๋ค. ์ปจํ ์ด๋๊ฐ ์์์ง ๋ ์๋ํ๋ค.
flex-basis
์์ดํ ์ ๋๋น ๊ธฐ๋ณธ ๊ฐ์ px ๋๋ %๋ก ์ง์ ํ๋ค. ๊ธฐ๋ณธ ๊ฐ์ auto ์ด๋ค.
flex
flex-grow, flex-shrink, flex-basis ์์ฑ์ ๋์์ ์ง์ ํ๋ค. ๊ธฐ๋ณธ ๊ฐ์ 0 1 ์ด๋ค.
align-self
์์ดํ ๊ฐ๋ณ์ ์ผ๋ก align-items ์์ฑ์ ์ ์ฉํ๋ค. ๊ธฐ๋ณธ ๊ฐ์ auto ์ด๋ค.
auto, flex-start, flex-end, center, baseline, stretch
Flex Box Image
๐ Tricks
holly grail layout ํ๋์ ๋ฐฉ๋ฒ
ETC
Flexbox Bugs
More Information
digitalocean-cheatsheets-flexbox
์ฐธ๊ณ
a-guide-to-flexbox poiemaweb.com/css3-flexbox studiomeal.com/archives/197
Last updated