display: flex
React Native์์ ์ฌ์ฉํ๊ธฐ์ํด ์ด ๋ถ๋ถ์ ๊ณต๋ถํ๋ค๋ฉด, web์์ ์ฌ์ฉํ๋ flex๋ฅผ ๋จผ์ ๊ณต๋ถํ๋๊ฒ์ด ๋์์ด ๋๋ค๊ณ ์๊ฐํ๋ค. React Native์์ ์ฌ์ฉํ ๋๋ ํ๋กํผํฐ๋ฅผ ๋ํํ๊ธฐ๋ฒ์ผ๋ก ํ์ํ๋ฉด ๋๋ค.
Display Flex
flex ์ ์ฉ๋ฐฉ๋ฒ์ ์์ฃผ ๊ฐ๋จํ๋ค. ์ ๋ ฌํ ์์๋ค(flex items)๋ฅผ ๊ฐ์ธ๊ณ ์๋ ์ปจํ
์ด๋(flex container)์ css์์ฑ์ผ๋ก display:flex
๋ฅผ ์ง์ ํด์ฃผ๋ ๊ฒ ๋ง์ผ๋ก ์์ฝ๊ฒ ์ ์ฉํ ์ ์๋ค.
.container {
display:flex
}
Flex Axis & flex-direction
Flex์ ์ถ์ ์ฃผ์ถ(main axis)๊ณผ ๊ต์ฐจ์ถ(cross axis)์ผ๋ก ๊ตฌ์ฑ ๋์ด์๋๋ฐ, ๊ธฐ๋ณธ๊ฐ์ ๊ฐ๋ก์ถ์ด ์ฃผ์ถ์ด๋ค. ์ฃผ์ถ์ ๊ฐ๋ก์ถ์ผ๋ก ๋ฐ๊พธ๊ณ ์ถ๋ค๋ฉด flex-direction
์์ฑ์ ๋ณ๊ฒฝํ๋ฉด ๋๋ค.(react-native์์๋ column์ด ๊ธฐ๋ณธ๊ฐ์ด๋ค.)
.container {
flex-direction: row(๊ธฐ๋ณธ๊ฐ) | column
}
flex-wrap
.container{
flex-wrap: nowrap(๊ธฐ๋ณธ๊ฐ) | wrap | wrap-reverse
}
nowrap
์ ํ๋ ์ค ์ปจํ
์ด๋๊ฐ์ ์ฃผ์ถ์ ๊ธฐ์ค์ผ๋ก ๋ชจ๋ ์์์์๋ฅผ ํ์ค์ ๋ฐฐ์นํ๋ค. wrap
์ ์ปจํ
์ด๋ ๋ด์ ์์ดํ
์ ์ฃผ์ถ์ ๋๋น(ํน์ ๋์ด)๋ก ๋์ด์ ์์ฉํ ์ ์์ผ๋ฉด ์ฌ๋ฌ์ค๋ก ๋๋๋ค. (whitespace
์์ฑ๊ณผ ๋น๊ตํ๋ฉด ์ดํดํ๊ธฐ ์ฝ๋ค)
flex-direction
๊ณผ flex-wrap
์ flex-flow
๋ผ๋ ์ฝ์นญ์ผ๋ก ์ฌ์ฉํ ์ ์๋ค.
.container {
flex-flow: row nowrap;
/*
* flex-direction : row;
* flex-wrap : nowrap;
*/
}
justify-content
justify-content
์์ฑ์ ์ฃผ์ถ์์ ์์์์(ํ๋ ์ค ์์ดํ
)๋ค์ ๋ฐฐ์นํ๋ ๋ฐฉ๋ฒ์ ์ ์ํ๋ค.
.container {
justify-content: flex-start(๊ธฐ๋ณธ๊ฐ) | flex-end | center | space-between | space-around
}
align-items
align-items
๋ ๊ต์ฐจ์ถ์์ ์์์์๋ค์ ์ ๋ ฌํ๋ ๋ฐฉ๋ฒ์ ์ ์ํ๋ค. justify-content
์ ๋น์ทํ๋ค.
.container {
align-items: flex-start | flex-end | center | stretch(๊ธฐ๋ณธ๊ฐ) | baseline
}
align-self
align-self
๋ ์์์์์ ์ง์ ํ๋ ์์ฑ๊ฐ์ผ๋ก, ๋ถ๋ณด์์์ align-items
์ ๋ฌด์ํ๊ณ ์์ ๋ง์ ๊ฐ์ผ๋ก ์ ๋ ฌํ๋ค. ๋ง์ฝ ํด๋น flex์์ดํ
์ margin
๊ฐ์ด auto
๋ผ๋ฉด align-self
๋ ๋ฌด์ํ๋ค.
.flexItems {
align-self: auto(๊ธฐ๋ณธ๊ฐ) | flex-start | flex-end | center | baseline | stretch
}