Flex 설정 : 1 1 0 Flex 기반을 설정하지 않고 Flex-Basis를 설정하는 것의 차이점은 무엇입니까?

Flex 레이아웃을 깊이 이해 : flex: 1 1 0 및 flex-basis 설정되지 않음

Flex 레이아웃에서 flex 속성은 자식 요소의 배열 및 크기 제어에 중요합니다. 이 기사는 flex: 1 1 0 과 flex-basis 의 차이를 심층적으로 탐구합니다.

flex 속성은 flex-grow , flex-shrink 및 flex-basis 의 약어입니다.

• flex-grow : 프로젝트 확대 척도를 정의합니다. 값이 클수록 나머지 공간을 할당 할 때 얻은 공간의 비율이 커집니다.
• flex-shrink : 규모를 줄이기 위해 프로젝트를 정의하십시오. 값이 클수록 공간이 충분하지 않으면 줄어 듭니다.
• flex-basis : 나머지 공간을 할당하기 전에 프로젝트의 초기 크기를 정의합니다.

flex: 1 1 0 flex-grow , flex-shrink 및 flex-basis 각각 1, 1 및 0으로 설정하십시오. 이것은 다음을 의미합니다.

• 이 프로젝트는 1의 비율로 나머지 공간의 할당에 참여할 것입니다.
• 프로젝트는 필요에 따라 감소 비율이 1입니다.
• 항목의 초기 크기는 0입니다.

flex-basis 설정되지 않은 경우 기본값은 auto 이므로 항목이 컨텐츠 크기에 따라 초기 크기를 자동으로 계산합니다.

샘플 코드와 비교해 봅시다.

<div class="container">
  <div class="image"></div>
  <div class="text">
    <p>이것은 플렉스-기반의 영향을 입증하기위한 더 긴 텍스트 단락입니다.</p>
  </div>
</div>

.Container {
  디스플레이 : Flex;
}

.Image {
  너비 : 200px;
  높이 : 200px;
  배경색 : #f0f0f0;
  마진 오른쪽 : 20px;
}

.텍스트 {
  /*flex : 1 1 0;*//*이 줄 주석 또는 무결한 비교*/
}

비교 분석 :

1. flex: 1 1 0 : .text 요소의 초기 크기는 0입니다. 남은 공간을 모두 차지합니다. .image 요소의 너비는 변경되지 않은 상태로 유지됩니다 (200px).

2. flex-basis 설정되지 않았습니다 (기본 auto ) : .text 요소의 초기 크기는 컨텐츠에 의해 결정됩니다. 텍스트가 길기 때문에 .text 요소는 큰 공간을 차지하므로 .image 요소가 컨테이너 너비에 맞게 압축 될 수 있습니다.

결론적으로 :

flex: 1 1 0 이고 flex-basis 설정은 완전히 다릅니다. 전자는 프로젝트가 나머지 공간을 할당하기 전에 공간을 차지하지 않도록하는 반면, 후자는 내용에 따라 크기에 적응합니다. 선택해야 할 것은 특정 레이아웃 요구 사항에 따라 다릅니다. 한 프로젝트가 나머지 공간을 완전히 채우고 다른 프로젝트의 크기가 아닌지 확인 해야하는 경우 flex: 1 1 0 최선의 선택입니다. 프로젝트가 컨텐츠의 크기에 적응하고 나머지 공간의 할당에 참여 해야하는 경우 flex-basis: auto 또는 기타 특정 값을 사용해야합니다.

위 내용은 Flex 설정 : 1 1 0 Flex 기반을 설정하지 않고 Flex-Basis를 설정하는 것의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!