FlexBox 레이아웃이란? (1)

Flexbox는 CSS3릐 레이아웃 모드이다.  block이나 inline과 같은 기존의 레이아웃 모드와 달리 flexbox는 레이아웃을 만들 때 배치하는 방향을 지정할 수 있다. 

리액트 네이티브는 flexbox에 상당히 의존적이다.

flex는 flexible의 줄임말로 유동적인 레이아웃을 쉽게 만들수 있다는 의미이다.

React Native에서의 FlexBox는 CSS에서와 마찬가지로 동일한 방식으로 동작하지만 몇가지 예외가 존재한다. 

• flexDirection 은 행대신에 열을 기본값으로 사용하고 있다.
• flex 매개변수 지정시 단일 숫자값만 지원한다.

리액트 네이티브에서 사용할 수 있는 flexbox 속성은 다음과같다. 

• flex
• flexDirection
• flexWrap
• alignItems

flex 속성은 display: flex 지정된 부모컨테이너 속성과 같다고 생각할 수 있다. 해당 컨테이너에 배치된 요소를 항목이라고하며 다음과같은 구조를 가진다. 

각 컨테이너는 flex-start 와 flex-end 포인트를 가진다. Flex는 주축 (Main axis) 교차축 (Cross-Axis)이 있다. 가로 축은 주축이고 세로축은 교차축 이다. 

가로축은 flex-direction 정의된다.  flex-direction 속성을 row 또는 row-reverse를 선택한경우 ,행을 기준으로 인라인방향으로 실행된다. (가로방향)

     column 또는 column-reverse 선택하면 주축이 페이지 위에서 아래쪽으로 블록 방향으로 실행된다. 

flex-direction 기본값은 행 (Main-axis)이며 왼쪽에서 오른쪽으로 이동되나, 원점은 변경될수 있다. row-reverse 할경우 원점은 오른쪽이다. 

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox