이 속성들에 대한 더 자세한 예제는 플렉스 박스를 활용한 레이아웃 페이지에서 확인할 수 있다.

다음 예제는 다양한 속성이 React Native 레이아웃에 어떤 영향을 미치는지 보여준다. flexWrap 속성 값을 변경하면서 UI에 사각형을 추가하거나 제거해 볼 수 있다.

TypeScript

JavaScript

참고 자료

Props

alignContent

alignContent는 교차 축(cross axis)에서 행(row)의 정렬 방식을 제어한다. 이 속성은 부모 요소의 alignContent를 재정의한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/align-content를 참고한다.

타입	필수 여부
enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around', 'space-evenly')	아니오

---

alignItems

alignItems는 자식 엘리먼트를 교차 축 방향으로 정렬한다. 예를 들어, 자식 엘리먼트가 수직으로 배치될 때 alignItems는 수평 정렬을 제어한다. 이 속성은 CSS의 align-items와 동일하게 작동하며 기본값은 stretch이다. 자세한 내용은 MDN 문서를 참고한다.

타입	필수 여부
enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')	아니오

alignSelf

alignSelf는 자식 엘리먼트가 교차 축 방향에서 어떻게 정렬될지 제어한다. 부모의 alignItems 설정을 무시하고 개별적으로 정렬 방식을 지정할 수 있다. CSS의 align-self 속성과 동일하게 작동하며, 기본값은 auto이다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/align-self를 참고한다.

타입	필수 여부
enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')	아니오

aspectRatio

aspectRatio는 노드의 정의되지 않은 차원의 크기를 제어한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio를 참고한다.

• 너비나 높이가 설정된 노드에서 aspectRatio는 설정되지 않은 차원의 크기를 제어한다.
• 플렉스 베이스가 설정된 노드에서 aspectRatio는 설정되지 않은 교차 축의 크기를 제어한다.
• 측정 함수가 있는 노드에서 aspectRatio는 측정 함수가 플렉스 베이스를 측정하는 것처럼 동작한다.
• 플렉스 확장/축소가 있는 노드에서 aspectRatio는 설정되지 않은 교차 축의 크기를 제어한다.
• aspectRatio는 최소/최대 크기를 고려한다.

타입	필수 여부
숫자, 문자열	아니오

borderBottomWidth

borderBottomWidth는 CSS의 border-bottom-width와 동일하게 동작한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/border-bottom-width를 참고한다.

타입	필수 여부
number	아니오

borderEndWidth

문서의 방향이 ltr(왼쪽에서 오른쪽)일 때, borderEndWidth는 borderRightWidth와 동일하다. 반대로 방향이 rtl(오른쪽에서 왼쪽)일 때는 borderLeftWidth와 동일하다.

타입	필수 여부
number	아니오

borderLeftWidth는 CSS의 border-left-width와 동일하게 동작한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/border-left-width를 참고한다.

타입	필수 여부
number	No

borderRightWidth는 CSS의 border-right-width와 동일하게 동작한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/border-right-width를 참고한다.

타입	필수 여부
number	아니오

borderStartWidth

텍스트 방향이 ltr(왼쪽에서 오른쪽)일 때, borderStartWidth는 borderLeftWidth와 동일하다. 반대로 텍스트 방향이 rtl(오른쪽에서 왼쪽)일 때는 borderStartWidth가 borderRightWidth와 동일하다.

타입	필수 여부
number	아니오

borderTopWidth

borderTopWidth는 CSS의 border-top-width와 동일하게 동작한다. 자세한 내용은 MDN 문서를 참고한다.

타입	필수 여부
number	아니오

borderWidth

borderWidth는 CSS의 border-width와 동일하게 작동한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/border-width를 참고한다.

타입	필수 여부
number	아니오

bottom은 컴포넌트의 하단 가장자리를 오프셋할 때 사용하는 논리적 픽셀 값이다.

CSS의 bottom과 비슷하게 작동하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em 단위나 다른 단위는 지원하지 않는다.

bottom이 레이아웃에 어떻게 영향을 미치는지 더 자세히 알고 싶다면, https://developer.mozilla.org/en-US/docs/Web/CSS/bottom 문서를 참고한다.

타입	필수 여부
number, string	아니오

boxSizing

boxSizing은 엘리먼트의 다양한 크기 속성(width, height, minWidth, minHeight 등)이 어떻게 계산되는지 정의한다. boxSizing이 border-box로 설정되면, 이 크기 값들은 엘리먼트의 border box에 적용된다. content-box로 설정되면, content box에 적용된다. 기본값은 border-box이다. 이 속성이 어떻게 동작하는지 더 자세히 알고 싶다면 웹 문서를 참고하면 된다.

타입	필수 여부
enum('border-box', 'content-box')	아니오

columnGap

columnGap는 CSS의 column-gap과 동일하게 동작한다. React Native에서는 픽셀 단위만 지원한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap을 참고한다.

타입	필수 여부
number	아니오

direction

direction은 사용자 인터페이스의 방향 흐름을 지정한다. 기본값은 inherit이며, 루트 노드의 경우 현재 로케일에 기반한 값을 가진다. 자세한 내용은 https://www.yogalayout.dev/docs/styling/layout-direction에서 확인할 수 있다.

타입	필수 여부	플랫폼
enum('inherit', 'ltr', 'rtl')	아니오	iOS

display

display는 이 컴포넌트의 표시 유형을 설정한다.

CSS의 display 속성과 유사하게 동작하지만 'flex'와 'none'만 지원한다. 기본값은 'flex'이다.

타입	필수 여부
enum('none', 'flex')	아니오

end는 방향이 ltr일 때 right와 동일하다. 방향이 rtl일 때는 left와 동일하다.

이 스타일은 left와 right 스타일보다 우선순위가 높다.

타입	필수 여부
number, string	아니오

flex

React Native에서 flex는 CSS와 동일하게 작동하지 않는다. flex는 문자열이 아닌 숫자로 표현되며, Yoga 레이아웃 엔진에 따라 동작한다.

flex가 양수일 경우, 컴포넌트는 유연하게 크기가 조정되며, flex 값에 비례해 크기가 결정된다. 예를 들어 flex가 2로 설정된 컴포넌트는 flex가 1인 컴포넌트보다 두 배 더 많은 공간을 차지한다. flex: <양수>는 flexGrow: <양수>, flexShrink: 1, flexBasis: 0과 동일하다.

flex가 0일 경우, 컴포넌트는 width와 height에 따라 크기가 결정되며, 유연하지 않다.

flex가 -1일 경우, 컴포넌트는 일반적으로 width와 height에 따라 크기가 결정된다. 하지만 공간이 부족할 경우, 컴포넌트는 minWidth와 minHeight까지 줄어든다.

flexGrow, flexShrink, flexBasis는 CSS와 동일하게 작동한다.

타입	필수 여부
number	아니오

flexBasis

flexBasis는 메인 축을 기준으로 아이템의 기본 크기를 정의하는 축 독립적인 방법이다. 부모 컨테이너가 flexDirection: row인 경우 flexBasis를 설정하는 것은 자식의 width를 설정하는 것과 유사하다. 반대로 부모 컨테이너가 flexDirection: column인 경우 flexBasis는 자식의 height를 설정하는 것과 같다. flexBasis는 아이템의 기본 크기를 나타내며, flexGrow와 flexShrink 계산이 수행되기 전의 크기를 의미한다.

타입	필수 여부
number, string	아니오

flexDirection

flexDirection은 컨테이너 내 자식 엘리먼트의 배치 방향을 결정한다. row는 왼쪽에서 오른쪽으로, column은 위에서 아래로 배치된다. 나머지 두 가지 방향도 쉽게 유추할 수 있다. CSS의 flex-direction과 동일하게 작동하지만, 기본값이 column이라는 점이 다르다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction을 참고한다.

타입	필수 여부
enum('row', 'row-reverse', 'column', 'column-reverse')	아니오

flexGrow

flexGrow는 컨테이너 내부의 남은 공간을 자식 요소들 간에 어떻게 분배할지 결정한다. 컨테이너가 자식 요소를 배치한 후, 남은 공간은 각 자식 요소의 flexGrow 값에 따라 비율적으로 분배된다.

flexGrow는 0 이상의 부동 소수점 값을 받으며, 기본값은 0이다. 컨테이너는 남은 공간을 자식 요소들의 flexGrow 값에 비례하여 분배한다.

타입	필수 여부
number	아니오

flexShrink

flexShrink는 플렉스 컨테이너의 메인 축에서 자식 엘리먼트들이 어떻게 줄어들어야 하는지 정의한다. 자식 엘리먼트들의 총 크기가 컨테이너의 크기를 초과할 때 사용된다. flexShrink는 flexGrow와 매우 유사하며, 초과된 크기를 음수의 남은 공간으로 간주하면 쉽게 이해할 수 있다. 이 두 속성은 자식 엘리먼트가 필요에 따라 커지고 줄어들 수 있도록 함께 작동한다.

flexShrink는 0 이상의 실수 값을 받으며, 기본값은 0이다. 컨테이너는 자식 엘리먼트들의 flexShrink 값에 비례하여 크기를 줄인다.

타입	필수 여부
number	아니오

flexWrap

flexWrap은 자식 요소들이 플렉스 컨테이너의 끝에 도달한 후 줄 바꿈을 할 수 있는지 여부를 제어한다. 이 속성은 CSS의 flex-wrap과 동일하게 작동하며, 기본값은 nowrap이다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap에서 확인할 수 있다. 단, 이 속성은 더 이상 기본값인 alignItems: stretch와 함께 작동하지 않으므로, 예를 들어 alignItems: flex-start를 사용하는 것이 좋다. (변경 사항 상세: https://github.com/facebook/react-native/releases/tag/v0.28.0)

타입	필수 여부
enum('wrap', 'nowrap', 'wrap-reverse')	아니오

gap은 CSS의 gap과 동일하게 작동한다. React Native에서는 픽셀 단위만 지원된다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/gap을 참고한다.

타입	필수 여부
number	아니오

height

height는 컴포넌트의 높이를 설정한다.

CSS의 height와 비슷하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em 단위 등 다른 단위는 지원하지 않는다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/height를 참고한다.

타입	필수 여부
number, string	아니오

justifyContent

justifyContent는 자식 엘리먼트를 주축 방향으로 정렬한다. 예를 들어, 자식 엘리먼트가 수직으로 배치되면 justifyContent는 수직 정렬을 제어한다. 이 속성은 CSS의 justify-content와 동일하게 작동하며, 기본값은 flex-start이다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content에서 확인할 수 있다.

타입	필수 여부
enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly')	No

left

left는 컴포넌트의 왼쪽 가장자리를 오프셋할 논리적 픽셀 수를 나타낸다.

CSS의 left와 유사하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용해야 한다. Em 단위나 기타 단위는 지원하지 않는다.

left가 레이아웃에 미치는 영향에 대한 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/left를 참고한다.

타입	필수 여부
number, string	아니오

margin

margin을 설정하는 것은 marginTop, marginLeft, marginBottom, marginRight 각각을 설정하는 것과 동일한 효과를 낸다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/margin을 참고한다.

타입	필수 여부
number, string	아니오

marginBottom

marginBottom은 CSS의 margin-bottom과 동일하게 작동한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/margin-bottom을 참고한다.

타입	필수 여부
number, string	아니오

marginEnd

문서의 방향이 ltr(왼쪽에서 오른쪽)일 때, marginEnd는 marginRight와 동일하게 동작한다. 반대로 방향이 rtl(오른쪽에서 왼쪽)일 때는 marginLeft와 동일하게 동작한다.

타입	필수 여부
number, string	아니오

marginHorizontal

marginHorizontal을 설정하는 것은 marginLeft와 marginRight를 동시에 설정하는 것과 같은 효과를 가진다.

타입	필수 여부
number, string	아니오

marginLeft는 CSS의 margin-left와 동일하게 작동한다. 자세한 내용은 MDN 문서를 참고한다.

타입	필수 여부
number, string	아니오

marginRight

marginRight는 CSS의 margin-right와 동일하게 동작한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/margin-right를 참고한다.

타입	필수 여부
number, string	아니오

marginStart

텍스트 방향이 ltr(왼쪽에서 오른쪽)인 경우, marginStart는 marginLeft와 동일하다. 텍스트 방향이 rtl(오른쪽에서 왼쪽)인 경우, marginStart는 marginRight와 동일하다.

타입	필수 여부
number, string	아니오

marginTop

marginTop은 CSS의 margin-top과 동일하게 작동한다. 더 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/margin-top을 참고한다.

타입	필수 여부
number, string	아니오

marginVertical

marginVertical을 설정하는 것은 marginTop과 marginBottom을 동시에 설정하는 것과 같은 효과를 가진다.

타입	필수 여부
number, string	아니오

maxHeight

maxHeight는 이 컴포넌트의 최대 높이를 나타내며, 논리적 픽셀 단위로 설정한다.

CSS의 max-height와 유사하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em 단위나 기타 단위는 지원하지 않는다.

자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/max-height를 참고한다.

타입	필수 여부
number, string	아니오

maxWidth

maxWidth는 이 컴포넌트의 최대 너비를 논리적 픽셀 단위로 지정한다.

CSS의 max-width와 유사하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em 단위나 다른 단위는 지원하지 않는다.

자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/max-width를 참고한다.

타입	필수 여부
number, string	아니오

minHeight

minHeight는 이 컴포넌트의 최소 높이를 나타내며, 논리적 픽셀 단위로 지정한다.

이 속성은 CSS의 min-height와 유사하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em이나 기타 단위는 지원하지 않는다.

자세한 내용은 다음 링크를 참고한다: https://developer.mozilla.org/en-US/docs/Web/CSS/min-height

타입	필수 여부
number, string	아니오

minWidth

minWidth는 이 컴포넌트의 최소 너비를 논리적 픽셀 단위로 지정한다.

CSS의 min-width와 유사하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em 단위나 기타 단위는 지원하지 않는다.

자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/min-width를 참고한다.

타입	필수 여부
number, string	No

overflow는 자식 엘리먼트가 측정되고 표시되는 방식을 제어한다. overflow: hidden은 뷰가 잘리게 하고, overflow: scroll은 뷰가 부모의 주축과 독립적으로 측정되도록 한다. 이 속성은 CSS의 overflow와 동일하게 동작하며, 기본값은 visible이다. 더 자세한 내용은 https://developer.mozilla.org/en/docs/Web/CSS/overflow를 참고한다.

타입	필수 여부
enum('visible', 'hidden', 'scroll')	아니오

padding

padding을 설정하는 것은 paddingTop, paddingBottom, paddingLeft, paddingRight를 각각 설정하는 것과 동일한 효과를 가진다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/padding을 참고한다.

타입	필수 여부
number, string	아니오

paddingBottom

paddingBottom은 CSS의 padding-bottom과 동일하게 동작한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom을 참고한다.

타입	필수 여부
number, string	아니오

paddingEnd

방향이 ltr(왼쪽에서 오른쪽)일 때, paddingEnd는 paddingRight와 동일하다. 방향이 rtl(오른쪽에서 왼쪽)일 때, paddingEnd는 paddingLeft와 동일하다.

타입	필수 여부
number, string	아니오

paddingHorizontal

paddingHorizontal을 설정하는 것은 paddingLeft와 paddingRight를 동시에 설정하는 것과 같다.

타입	필수 여부
number, string	아니오

paddingLeft는 CSS의 padding-left와 동일하게 동작한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/padding-left를 참고한다.

타입	필수 여부
number, string	아니오

paddingRight는 CSS의 padding-right와 동일하게 작동한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/padding-right에서 확인할 수 있다.

타입	필수 여부
number, string	아니오

paddingStart

방향이 ltr(왼쪽에서 오른쪽)일 때, paddingStart는 paddingLeft와 동일하다. 방향이 rtl(오른쪽에서 왼쪽)일 때, paddingStart는 paddingRight와 동일하다.

타입	필수 여부
number, string	아니오

paddingTop은 CSS의 padding-top과 동일하게 동작한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/padding-top을 참고한다.

타입	필수 여부
number, string	아니오

paddingVertical은 paddingTop과 paddingBottom을 동시에 설정하는 것과 같다.

타입	필수 여부
number, string	아니오

position

React Native에서 position은 일반 CSS와 유사하지만, 기본적으로 모든 요소가 relative로 설정된다.

relative는 요소를 레이아웃의 일반적인 흐름에 따라 배치한다. top, bottom, left, right 같은 오프셋 값은 이 레이아웃을 기준으로 적용된다.

absolute는 요소를 레이아웃의 일반적인 흐름에서 벗어나게 한다. 오프셋 값은 컨테이닝 블록을 기준으로 적용된다.

static은 요소를 레이아웃의 일반적인 흐름에 따라 배치한다. 오프셋 값은 아무런 영향을 미치지 않는다. static 요소는 절대 위치를 가진 하위 요소의 컨테이닝 블록을 형성하지 않는다.

더 자세한 정보는 플렉스 박스를 사용한 레이아웃 문서를 참고하자. 또한, Yoga 문서에서 React Native와 CSS 간의 position 차이를 더 자세히 확인할 수 있다.

타입	필수 여부
enum('absolute', 'relative', 'static')	아니오

right는 컴포넌트의 오른쪽 가장자리를 오프셋할 논리적 픽셀 수를 나타낸다.

CSS에서의 right와 유사하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용해야 한다. Em 단위나 다른 단위는 지원하지 않는다.

right가 레이아웃에 어떤 영향을 미치는지 더 자세히 알고 싶다면 https://developer.mozilla.org/en-US/docs/Web/CSS/right를 참고한다.

타입	필수 여부
number, string	No

rowGap

rowGap은 CSS의 row-gap과 동일하게 작동한다. React Native에서는 픽셀 단위만 지원한다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap을 참고한다.

타입	필수 여부
number	아니오

start는 방향이 ltr(왼쪽에서 오른쪽)일 때 left와 동일하다. 방향이 rtl(오른쪽에서 왼쪽)일 때는 right와 동일하다.

이 스타일은 left, right, end 스타일보다 우선 적용된다.

타입	필수 여부
number, string	아니오

top은 이 컴포넌트의 상단 가장자리를 오프셋할 논리적 픽셀 수를 나타낸다.

CSS에서의 top과 유사하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em 단위나 기타 다른 단위는 지원하지 않는다.

top이 레이아웃에 어떤 영향을 미치는지 더 자세히 알아보려면 https://developer.mozilla.org/en-US/docs/Web/CSS/top 를 참고한다.

타입	필수 여부
number, string	아니요

width

width는 컴포넌트의 너비를 설정한다.

CSS의 width와 유사하게 동작하지만, React Native에서는 포인트나 퍼센트만 사용할 수 있다. Em 단위나 기타 단위는 지원하지 않는다. 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/width를 참고한다.

타입	필수 여부
number, string	No

zIndex

zIndex는 어떤 컴포넌트가 다른 컴포넌트 위에 표시될지 제어한다. 일반적으로 zIndex를 사용하지 않는다. 컴포넌트는 문서 트리에서의 순서에 따라 렌더링되기 때문에, 나중에 렌더링되는 컴포넌트가 이전 컴포넌트 위에 그려진다. 그러나 애니메이션이나 커스텀 모달 인터페이스에서 이러한 동작을 원하지 않을 때 zIndex가 유용할 수 있다.

zIndex는 CSS의 z-index 속성과 동일하게 작동한다. 즉, 더 큰 zIndex 값을 가진 컴포넌트가 위에 렌더링된다. z축을 휴대폰 화면에서 눈으로 뻗어나가는 방향이라고 생각하면 이해하기 쉽다. 더 자세한 내용은 https://developer.mozilla.org/en-US/docs/Web/CSS/z-index를 참고한다.

iOS에서는 zIndex가 예상대로 동작하려면 View들이 서로 형제 관계여야 할 수 있다.

타입	필수 여부
number	아니오