FlexBox

React Native는 그리드 시스템에 flexbox를 이용하는데

그 기본에 대해 공부하고 정리해본다. 물론 웹에서 지원하는 flexbox와는 약간 다르지만

그 기본에 대해 공부하는 것이다.

Flexbox 모델은 뷰포트(viewport) 및 엘리먼트 (elemnt) 크기가 동적이거나 알려지지(unknown) 않은 경우에도 문서 내의 엘리먼트간에 공간을 배치(layout), 정렬(align) 및 분산(distribute)하는 효율적인 방법을 제공한다.

 

Flexbox 모델을 사용하려면 부모 엘리먼트를 flex container (AKA flexible container)로 만들어야한다.

Flexbox에서는 두가지 개념을 알면 좀 더 이해하기 쉽다.

Flex container:       {display: flex}를 설정 한 부모 엘리먼트

Flex items :            Flex container 내의 자식 엘리먼트

Flex Container 프로퍼티

 

Flex-direction 배치되는 방향 제어

flex-direction: row || column || row-reverse || column-reverse;

 

Flex-wrap  다음 줄로 매핑되게하는 속성, 기본값은 no-wrap

flex-wrap: wrap || no-wrap || wrap-reverse;

 

Flex-flow direction & wrsp의 약칭속성 ( border: 1px soild red 같은 )

flex-flow: row wrap;

 

Justify-content  아이템(자식 엘리먼트)을 배치하는 방법

justify-content: flex-start || flex-end || center || space-between || space-around

 

Align-items

align-items: flex-start || flex-end || center || stretch || baseline

 

Align-content multi-line 플렉스 컨테이너에서 사용

Align-content: flex-start || flex-end || center || stretch

Flex Item 프로퍼티

Order  컨테이너 내의 Flex Item을 재정렬

order: number

예제 이동

flex-grow & flex-shrink   컨테이너 내의 여분의 공간이 있으면 확장(grow) 및 축소(shrink)

flex-grow: number

flex-shrink: number

flex-basis  Flex-Item의 크기를 초기 지정

flex-basic: length | auto

flex shorthand  flex-grow, flex-shrink 및

flex: flex-grow flex-shrink flex-basic

 flex: 0 1 auto === flex: default

  flex: 0 0 auto === flex: none

  flex: 1 1 auto === flex: auto
  flex: "positive number" === flex: positive number 1 0

align-self   Flex-Item을 더 세밀하게 컨트롤

align-self: auto || flex-start || flex-end || center || baseline || stretch

참고 : 

https://www.vobour.com/1-flexbox-이해-당신이-알아야-할-모든-것-understa

https://www.vobour.com/2-flexbox-이해-당신이-알아야-할-모든-것-understa

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://naradesign.net/wp/2017/05/02/2467/