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
}

์ฐธ๊ณ