React Native Flexbox 레이아웃의 자세한 해석

이 글은 주로 React Native Flexbox 레이아웃에 대한 간략한 논의(요약)를 소개하고 있습니다. 이제 참고용으로 공유하겠습니다.

Flex는 "유연한 레이아웃"을 의미하는 유연한 상자(Flexible Box)의 약자로 상자 모양의 모델에 최대한의 유연성을 제공하는 데 사용됩니다.

기본 개념

Flex 레이아웃을 사용하는 요소를 Flex 컨테이너(플렉스 컨테이너) 또는 줄여서 "컨테이너"라고 합니다. 모든 하위 요소는 자동으로 Flex 항목(플렉스 항목) 또는 줄여서 "항목"이라고 하는 컨테이너 멤버가 됩니다.

컨테이너에는 기본적으로 수평 주축과 수직 교차축이라는 두 개의 축이 있습니다. 주축의 시작 위치(경계와의 교차점)를 주 시작이라고 하고, 끝 위치를 주 끝이라고 합니다. 교차 축의 시작 위치를 교차 시작이라고 하며, 끝 위치를 교차 끝이라고 합니다.

항목은 기본적으로 주축을 따라 정렬됩니다. 단일 항목이 차지하는 주축 공간을 기본 크기라고 하며, 단일 항목이 차지하는 교차축 공간을 교차 크기라고 합니다.

컨테이너 속성

다음 6가지 속성이 컨테이너에 설정됩니다.

1. flex-direction

2. flex-wrap

3. flex-flow

4. justify-content

5. align-items

6. align-content

플렉스 방향

flex-direction 속성은 주축의 방향(즉, 항목 배열 방향)을 결정합니다.

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

4가지 값이 있습니다.

1. row(기본값): 주축이 가로 방향이고 시작점이 왼쪽 끝입니다.

2. row-reverse: 주축이 가로 방향이고 시작점이 됩니다.

3. column: 주축이 수직 방향이고 시작점이 위쪽 가장자리에 있습니다.

4. column-reverse: 주축이 수직이고 시작점이 입니다. 아래쪽 가장자리

flex-wrap 속성

기본적으로 항목은 한 줄("축"이라고도 함)에 정렬됩니다. flex-wrap 속성은 한 축이 맞지 않는 경우 줄 바꿈 방법을 정의합니다.

{
 flex-wrap: nowrap | wrap | wrap-reverse;
}

세 가지 값이 있습니다.

1) nowrap(기본값): 줄 바꿈이 없습니다.

2) 감싸다: 감싸다, 첫 번째 줄을 맨 위에 오도록 합니다.

3) Wrap-reverse: 아래 첫 번째 줄을 래핑합니다.

flex-flow

flex-flow 속성은 flex-direction 속성과 flex-wrap 속성의 축약형입니다. 기본값은 row nowrap입니다.

{
 flex-flow: <flex-direction> || <flex-wrap>;
}

justify-content 속성

justify-content 속성은 주축의 항목 정렬을 정의합니다.

5개의 값이 있으며 구체적인 정렬은 축 방향과 관련이 있습니다. 다음은 주축이 왼쪽에서 오른쪽으로 가정합니다.

1. flex-start(기본값): 왼쪽 정렬

2. flex-end: 오른쪽 정렬

3. center: 가운데

4. space -between: 양쪽 끝이 정렬되어 항목 사이의 간격이 모두 동일합니다.

5. space-around: 각 항목이 양쪽에 동일한 간격으로 배치되어 있습니다. 따라서 항목 사이의 간격은 항목과 테두리 사이의 간격의 두 배입니다.

align-items 속성

align-items 속성은 항목이 교차 축에 정렬되는 방식을 정의합니다.

{
 align-items: flex-start | flex-end | center | baseline | stretch;
}

5개의 값이 있습니다. 구체적인 정렬은 교차축의 방향과 관련됩니다. 아래에서는 교차축이 위에서 아래로 가정됩니다.

1. flex-start : 교차축의 시작점 정렬

2. flex-end : 교차축의 끝점 정렬

3. center : 교차축의 중간점 정렬

4. baseline : 항목 텍스트의 첫 번째 줄 기준 정렬

5. stretch(기본값): 항목이 높이를 설정하지 않거나 자동으로 설정된 경우 전체 컨테이너의 높이를 차지합니다.

align -content 속성

align-content 속성은 여러 루트를 정의합니다. 축의 정렬입니다. 프로젝트에 축이 하나만 있는 경우 이 속성은 효과가 없습니다.

{
 align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

이 속성에는 6개의 값이 있습니다. ​

1. flex-start: 교차 축의 시작점에 맞춰 정렬

2. flex-end: 교차 축의 끝점에 맞춰 정렬

3. 중심: 교차축에 맞춰 정렬됨 중간점 정렬

4. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布

5. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍

6. stretch（默认值）：轴线占满整个交叉轴

项目的属性

以下6个属性设置在项目上。

1. order

2. flex-grow

3. flex-shrink

4. flex-basis

5. flex

6. align-self

order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

{
 order: <integer>;
}

flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

{
 flex-grow: <number>; /* default 0 */
}

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。

{
 flex-shrink: <number>; /* default 1 */
}

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。

负值对该属性无效。

flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

{
 flex-basis: <length> | auto; /* default auto */
}

它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。

flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

 {
 flex: none | [ <&#39;flex-grow&#39;> <&#39;flex-shrink&#39;>? || <&#39;flex-basis&#39;> ]
}

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。

align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

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

 

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

在Angular中如何整合zTree代码

classList如何实现两个按钮样式切换

在vue.js中有关2.x的虚拟滚动条

利用AngularJS如何实现下载excel文件功能

위 내용은 React Native Flexbox 레이아웃의 자세한 해석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!