Flexbox로 레이아웃 구성

Tags
flex
부연설명

개념 이해를 돕는 사이트

 

Flexbox

Flexbox는 다양한 화면 크기에 일관된 레이아웃을 제공하도록 설계되었다.
 
일반적으로 올바른 레이아웃을 얻기 위해 flexDirection, alignItems 및 justifyContent의 조합을 사용한다.
Flexbox는 몇가지 사항을 제외하곤 웹의 CSS에서와 동일한 방식으로 동작한다.
  • flexDirection이 row 대신 column으로 기본 설정되고
  • flex 매개 변수가 단일 숫자만 지원하는 등 기본값이 다르다.
 

Flex

flex는 요소가 가용공간을 어떻게 "채울(fill)" 것인지를 정의한다.
공간은 각 원소의 flex property에 따라 나누어진다.
 
notion image
위 그림은
  • flex:1을 가진 부모요소인 <View> 컨테이너
    • Red (flex:1)
    • Orange (flex:2)
    • Green (flex:3)
1+2+3=6으로, 부모의 가용공간 내에서 Red는 1/6, Orange는 2/6, Green은 3/6 만큼씩 공간을 채운다.
 

flexDirection (주축 설정)

"FlexDirection"은 노드의 자녀가 배치되는 방향을 제어한다.
main axis(주축)이라고도 부르며, cross axis는 주축에 수직인 축 또는 포장선이 놓여 있는 축을 뜻한다.
  • row
  • row-reverse
  • column - default
  • column-reverse
 
notion image

direction (방향 설정)

계층구조에서 배치 방향을 지정한다.
레이아웃 방향은 또한 엣지 "start"와 "end"가 가리키는 것에도 영향을 미친다.
 

LTR (Left To Right) - default

: 왼쪽에서 오른쪽으로 배치
  • "start" - 왼쪽
  • "end" - 오른쪽

RTL (Right To Left)

: 오른쪽에서 왼쪽으로 배치
  • "start" - 오른쪽
  • "end" - 왼쪽
 

Justify Content

미리보기 : https://yogalayout.com/docs/justify-content/
주축을 기준으로 어떻게 정렬할 건지 설정한다.
  • flex-start - default
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly

주축이 column 일 때 ( 주축에 따라서 봐야함 )

notion image

Align Items

자식 요소들을 cross axis (주축을 기준으로 수직인 축) 상에서 어떻게 정렬할 건지 지정한다.
main axis가 기준인 justifyContent와 유사하지만, Align Item은 cross axis가 기준임을 기억하자.
  • stretch - default
  • flex-start
  • flex-end
  • center
  • baseline
아래 예시는 main axis가 column인 상태에서 align items를 적용하였다.
notion image
 
stretch가 효과를 발휘하려면, 자식은 2차축을 따라 고정된 치수를 가지지 않아야 한다.
notion image
 

Align Self (개별 자식에게 별도로 alignItems 적용)

alignSelf는 alignItems와 옵션 및 효과가 동일하지만 컨테이너 내의 자식에게 영향을 미치는 대신, 이 속성을 한 자식에게 적용하여 부모 내의 자식 정렬을 변경할 수 있다.
alignSelf는 부모에 의해 설정된 모든 옵션을 alignItems로 재정의한다.
notion image
 

Flex Wrap

flexWrap은 자식요소들이 컨테이너의 크기를 넘어섰을 때 어떻게 할 건지 정의한다.
기본적으로 자식요소는 한줄로 나열되도록 강제되지만, wrapping이 허용된다면 컨테이너의 크기를 넘어서면 그 다음줄에 나타나도록 표현할 수 있다.
⇒ 컨테이너 범위를 넘어선다면 여러줄로 표시됨.
notion image
 
이 때 여러줄로 표시되는 요소들을 어떻게 화면에 출력시킬 건지는 alignContent로 설정함.
 

Align Content

alignContent는 cross-axis(교차 축)에 따른 선의 분포를 정의한다.
요소들이 felxWrap을 통해 여러줄로 wrapped 되어있을 때에만 효과가 있다.
  • flex-start - default
  • fles-end
  • stretch
  • center
  • space-between
  • space-around
역시 주축이 column일 때를 기준일 때 아래와 같이 적용된다.
notion image
 

Flex Basis, Grow, Shrink

미리보기 홈페이지 : https://yogalayout.com/docs/flex/ (이거 보는게 이해가 훨 빠름)

flexGrow (배치시키고 남은 공간 분배)

주축을 따라 자식들에게 컨테이너의 공간을 어떻게 분배할 지를 결정한다.
먼저 자식들을 위치시키고, 남은 공간을 자식 요소에 명시된 flex grow 값에 따라 분배한다.
  • flexGrow는 0≤ 한 부동 소수점도 허용. (default = 0)
  • 컨테이너는 남은 공간을 자식 요소의 flexGrow 가중치에 따라 남은 공간을 분배한다.
notion image
notion image
 

flexShrink (컨테이너 범위를 넘어간다면 수축)

FlexShrink는 자식의 전체 크기가 주 축의 컨테이너 크기를 초과한 경우 주축을 따라 자식요소를 수축시킨다.
flexShrink는 flexGrow와 매우 유사하며, 넘치는 크기가 음의 남은 공간으로 간주되는 경우에도 같은 방식으로 생각할 수 있다. 또한 이 두 가지 특성은 자식들이 필요에 따라 성장하고 줄어들 수 있도록 함으로써 함께 잘 작동한다. (flexShirnk, flexGrow 같이 사용 가능)
  • flexShrik도 0≤ 한 부동 소수점도 허용. (default =1)
  • 컨테이너는 남은 공간을 자식 요소의 flexShrink 가중치에 따라 자식요소를 수축시킨다.
 
flexGrow에 음의 크기가 주어진 경우와 차이점은 flexShrink는 요소가 얼마만큼 줄어들 수 있는 지를 고려하여 적용된다. 작은 요소가 줄어들면서 눈에 보이지 않게되는 현상을 방지한다.
 

flexBasis

flexBasis는 주축을 따라 항목의 기본 크기를 제공하는 축 독립적인 방법이다.
자식요소에 flexBasis를 설정하는 것은 부모가 "flexDirection: row"설정된 컨테이너인 경우 자식의 "width"을 설정하거나, 부모가 "flexDirection: column"으로 설정된 컨테이너라면 자식의 "height"를 설정하는 것과 유사하다.
항목의 flexBasis는 해당 항목의 기본 크기, 즉 "FlexGrow" 및 "FlexShrink" 계산이 수행되기 전의 항목의 크기를 지정한다.

Width and Height

가로로 고정값 명시 : width
세로로 고정값 명시 : height
 
  • auto - default
      • : Resact Native(원본 반응)는 다른 자식, 텍스트 또는 이미지 중 어떤 것이든 그 내용에 따라 요소의 너비/높이를 계산한다.
  • 픽셀 명시
      • : 직접 픽셀 값을 고정으로 줄 수 있음
  • 퍼센트 명시
      • : 고정 픽셀값이 아닌 퍼센트로도 줄 수 있음.
 

Absolute & Relative Layout

position 타입은 배치를 상대적으로 할 지, 절대적으로 할 지를 명시한다.
 
  • relative - default
      • : 다른 요소들의 위치를 고려해서 상대적으로 배치
  • absolute
      • : 다른 요소랑 상관없이 절대적으로 배치
notion image