FlexBox

flexDirection

controls the direction in which the children of a node are laid out. This is also referred to as the main axis. The cross axis is the axis perpendicular to the main axis, or the axis which the wrapping lines are laid out in.

• row - 가로로 배치 ( 좌 -> 우 )

• column (default value) - 기본 세로 ( 위 -> 아래 )

• row-reverse - 가로로 배치 ( 우 -> 좌)

• column-reverse - 세로로 배치 ( 아래 -> 위 )

 

justifyContent

- 진행 하는 방향에서 자식을 배치

 

• flex-start -  세로방향일시 제일 위 시작부분에 배치
• flex-end - 제일 아래 부분에 배치
• center - 가운데 배치
• space-between - 자식들을 나누어 배치 ( 시작점, 끝점 )
• space-around - 자식들을 동일한 넓이로 배치 ( 여백까지  동일 비율 )
• space-evenly - 자식들을 여백을 동일하게 배치

 

alignItems

- 진행방향에서 교차 축으로 배치

• stretch( default value ) height컨테이너의 가로 축 과 일치하도록 컨테이너의 자식을 늘 립니다.

• flex-start 컨테이너의 자식을 컨테이너의 교차 축 시작에 맞 춥니 다.

• flex-end 컨테이너의 자식을 컨테이너의 가로 축 끝에 맞 춥니 다.

• center 컨테이너의 자식을 컨테이너의 가로 축 가운데에 맞 춥니 다.

• baseline 공통 기준선을 따라 컨테이너의 자식을 정렬합니다. 개별 자식을 부모의 기준선으로 설정할 수 있습니다.

 

alignSelf

- alignItems 와 효과는 동일하지만, 부모뷰에서 자식의 속성을 단일로 적용가능

 

 

flexWrap

- 자식이 기본축을 따라 부모의 크기를 초과할때 발생하는 상황을 제어

• nowrap - 자식이 부모를 초과하게 되면 짤림.
• wrap- 자식이 부모를 초과하게되면 다음줄로 개행

 

Flex grow

-  가중지 flex 가 부여된 자식에게 남아있는 공간을 배분함

-  기본값은 0

 

 

FLEX SHRINK

- 자식의 총 크기가 기본 축의 컨테이너 크기를 초과하는 경우 주축을 따라 자식 축소하는 방법을 설명합니다.

 

 

절대 및 상대 레이아웃

position 요소 의 유형은 요소가 부모 내에 어떻게 배치되는지 정의합니다.

 

relative( 기본값 ) 기본적으로 요소는 상대적으로 배치됩니다. 요소가 그 레이아웃의 통상의 흐름에 따라 배치되고,이 수단의 값에 기초하여 그 위치에 대하여 오프셋 (offset) top, right, bottom, 및 left. 오프셋은 형제 또는 부모 요소의 위치에 영향을 미치지 않습니다.

 

absolute절대적으로 배치되면 요소는 일반 레이아웃 흐름에 참여하지 않습니다. 대신 형제와 독립적으로 배치됩니다. 위치는에 기초하여 결정되고 top, right, bottom및 left값.