기본 스타일시트 대응: {flex:1}의 기능은?

기본 스타일시트 대응: {flex:1}의 기능은?

React Native는 레이아웃에 flexbox를 사용한다.내가 본 모든 예에서, 그들은 다음과 같은 일을 한다.

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row'
  }
});

나는 그 일이 궁금하다.flex: 1part. Chris Coyier의 정의에 기초하여 여기 https://css-tricks.com/snippets/css/a-guide-to-flexbox/,flex: 1와 같아야 한다flex-grow: 1, 그러나 나에게 그것은 처럼 보인다.flex: 1는 In React Native와 하다.display: flexCSS로

여기 그것을 증명하는 코드펜이 있다.flex: 1Ract Original의 CSS에서는 아무것도 하지 .

http://codepen.io/johnnyo/pen/BoKbpb

우리가 사용해야만display: flexFlexbox가 작동하기 시작할 때까지 CSS:

http://codepen.io/johnnyo/pen/epZXgz

이 말은 그렇다는 뜻인가.flex: 1는 In React Native와 하다.display: flexCSS에서?

css flexbox와 페이스북이 구현한 것은 상당한 차이가 있다.많은 공통점이 있지만 디폴트는 매우 다르다.구체적으로:

Everything is display: flex by default. All the behaviors of block and inline-block can be expressed in term of flex but not the opposite.

flex: 속성은 동일한 수준에서 서로 다른 flex 값(flex: 1, flex: 3)을 가진 성분이 거의 없을 때에만 사용된다. 즉, 두 번째 원소는 첫 번째 원소보다 3배 커야 한다.유연한 속성만 지원됨(확장/확장 지원 없음)

추가 정보: https://github.com/facebook/css-layout

자렉 포티우크의 대답에 대한 한 마디: '플렉스: 1'은 플렉스 성장 행동과 유사한 반응적 행동을 한다.그것이 유일하게 유연한 것이라 할지라도: 정의된다.

flexDirection, alignItems, prittyContent 모두 요소의 자식 스타일링을 정의한다.CSS Display와 유사함: flex와 유사하며, 또한 child를 정의한다.

대조적으로 flex: x는 요소 자체를 정의한다.

예: 용기 구성 요소에 flexDirection: 'row'가 있는 경우 alignItems: '중앙'
그리고 3명의 아이들이 있다:

아이 1의 너비는 50이다.

어린이 2는 유연한 1(또는 다른 숫자, 그러나 1은 일반적인 관행)

아이 3은 너비가 50이다.

그리고 나서 중간 구성 요소는 세 아이가 함께 부모 구성 요소의 전체 폭을 채울 수 있도록 '스레치'할 것이다.

많은 튜토리얼 사용flex: 1당신의 예에서 그랬던 것처럼 말이다.주된 이유는 때때로 (기본적으로 ListStyle과 같은 요소에 따라, 내 메모리가 서비스하는 경우) 높이와 같은 치수를 정의하지 않으면 구성 요소가 전체 화면/영역을 차지하지 않기 때문이다(예: height: '400px'). 플렉스: 다양한 크기에 대한 반응성을 유지하기 때문에 놀랍다.

그러나 형제자매가 없는 모든 구성요소의 경우 플렉스 값은 완전히 임의적이라는 점에 유의해야 한다.예를 들어, 최고 수준의 구성 요소에 대해서는flex: 43254315그리고 그것은 같은 일을 한다.flex: 1 것을 "전체 공간을 차지하다"(어떠한 "입장"이라도)라는 뜻일 뿐이다.

반면에 형제자매 구성 요소들이 있다면, 유연한 가치는 매우 중요하다.예를 들어, 한 구성 요소가 다음과 같은 경우flex: 2그리고 또 하나는flex: 3그리고 나서 첫 번째 화면은 2/5를 차지하며 두 번째 화면은 3/5를 차지한다.

요컨대, 당신의 스타일에 따라, 그것은 마치flex: 1 display: flex하지만 그것은 단지 당신이 예에서 그것을 사용하는 방법 때문이다.형제자매만 준다면 아주 다르게 행동한다는 것을 알게 될 것이다.

너처럼 나는 페이스북 코드에 제대로 기록되지 않은 이 태그를 이해하려고 애썼지만, 결국 나는 그것이 두 가지 일을 한다는 것을 알게 되었다.

1. 컨테이너는 다음 기능을 가진 모든 어린이를 고려한다.flex그들이 얼마나 많은 공간을 차지하는지를 결정하기 위한 목적으로 0의 높이를 갖는 것을 속성으로 한다.
2. 구 with가 있는 요소:flex: X다른 부품을 배치한 후 컨테이너에 남아 있는 공간을 확보하도록 확장한다.그들은 X 값에 비례하여 이 여분의 공간을 공유한다.

첫번째 항목은 왜 이다.flex: 1와 같은 효과를 나타낼 수 있다.display: flex 다음 JSX 코드를 고려하십시오.

<ExampleAppContainer>
    <Text>
        I get printed.
    </Text>
    <Text style={{flex: 1}}>
        But I don't :(
    </Text>
</ExampleAppContainer>

두 번째 텍스트 구성요소는 높이가 0인 것으로 간주되기 때문에 첫 번째 텍스트 구성요소만 인쇄된다.ExampleAppContainer첫 번째 텍스트 구성요소에 충분한 공간을 할당하고, 두 번째 구성요소를 확장할 공간이 없다.

이제 다음 코드를 고려하십시오.

<ExampleAppContainer style={{flex:1}}>
    <Text>
        I get printed.
    </Text>
    <Text style={{flex: 1}}>
        And so do I!
    </Text>
</ExampleAppContainer>

이후ExampleAppContainer가지다flex: 1, 그것은 가능한 한 많은 공간을 차지하기 위해 확장된다.앱의 리액션 부분의 루트 컴포넌트라고 가정할 때, 이것은 보통 전체 전화 화면일 것이다.다음으로 첫 번째 텍스트 구성요소에 충분한 공간을 할당하고, 두 번째 텍스트 구성요소를 확장하여 화면의 나머지 부분을 차지하도록 한다.

이런 식으로 너는 종종 지원해야 할 필요가 있을 것이다.flex: 1가장 안쪽의 구성요소를 다음 구성요소로 사용할 수 있도록 구성 요소 계층 구조까지flex: N적절히 확장할 수 있는 공간

flex: 1

1. 구성 요소에 사용 가능한 모든 공간을 채우도록 지시(다른 구성 요소와 동일한 상위 구성 요소가 공유됨)

2. 형제 구성 요소가 있는 경우flex는 가성, 그 때의 가치관을 한다.flex: 1(ㄴ) 키 된다부모가 고정 너비와 키 또는 플렉스를 가지지 않는 경우, 부모는 0의 치수를 가지며 플렉시블 하위는 보이지 않을 것이다.

이것은 매우 간단하다. 당신이 flex라고 말할 때, 만약 이 요소가 flex를 가지고 있다면 요소들이 parent 요소의 모든 높이를 얻는 요소들: 1 그리고 parent 요소들이 화면 크기의 모든 높이를 얻는다고 생각해라.

예를 들어, 모든 화면 높이를 얻는 하나의 컨테이너 요소를 원하는 경우 이 요소에는 각 요소가 1/3 화면 높이를 갖는 3개의 하위 요소가 있다. 예를 들어 상위 요소 플렉스: 1 및 3 하위 요소 플렉스: 1/3 참조 아래 코드 벨로

<View style={{flex: 1,backgroundColor: 'red'}}>

        <View style={{flex: 1/3, backgroundColor: 'green'}}></View>

        <View style={{flex: 1/3, backgroundColor: 'yellow'}}></View>

        <View style={{flex: 1/3, backgroundColor: 'pink'}}></View>

      </View>

참조URL: https://stackoverflow.com/questions/32660706/react-native-stylesheet-what-does-flex1-do