CSS에서 `flex: 1`은 실제로 무엇을 합니까?

flex 이해: 1

CSS 영역에서 flex 속성은 요소의 레이아웃과 배포를 제어하는 ​​데 중요한 역할을 합니다. 플렉스 컨테이너. 기본적으로 0 1 auto 값을 가정하여 flex-grow, flex-shrink 및 flex-basis에 각각 값을 할당합니다.

그러나 flex: 1이 사용되는 경우 일반적인 사용법이 발생합니다. 이러한 약칭 지정은 실제 의도에 대한 의문을 제기합니다.

Decoding flex: 1

혼란은 flex의 다양한 해석에서 비롯됩니다: 1. 일부에서는 이것이 1 1 auto를 의미한다고 가정합니다. , 다른 사람들은 1 0 auto를 이에 해당한다고 추측합니다.

그러나 두 가정 모두 정확하지 않습니다. flex: 1은 실제로 다음을 나타냅니다.

• flex-grow: 1: 요소는 플렉스 컨테이너 내에서 사용 가능한 공간에 비례하여 확장됩니다. 컨테이너가 커지면 요소도 커집니다.
• flex-shrink: 1: 요소는 컨테이너 축소에 비례하여 수축합니다. 공간이 부족해지면 요소는 컨테이너 내의 다른 요소를 수용하기 위해 축소됩니다.
• flex-basis: 0: 요소에는 지정된 시작 크기가 없으며 다음에 따라 동적으로 공간을 차지합니다. 사용 가능한 화면 또는 창 크기. 컨테이너나 뷰포트의 크기가 조정되면 크기도 조정됩니다.

기본적으로 flex: 1은 요소가 Flex 컨테이너의 다른 요소와 동일하게 공간을 차지하도록 보장하여 성장과 축소가 모두 유지되도록 합니다. 균형 잡힌 분포. 이러한 플렉스 동작은 요소가 다양한 화면 크기에 적응해야 하는 반응형 디자인에 일반적으로 사용되어 다양한 기기 해상도에 대한 조화로운 레이아웃을 보장합니다.

위 내용은 CSS에서 `flex: 1`은 실제로 무엇을 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!