CSS3의 Flex 레이아웃에 대한 자세한 설명

1. 주문 속성

주문 속성은 항목의 순서를 정의합니다. 값이 작을수록 순위가 높아집니다. 기본값은 0입니다.

2. flex-grow 속성

flex-grow 속성은 항목의 확대 비율을 정의합니다. 즉, 남은 공간이 있으면 확대되지 않습니다.

모든 항목의 flex-grow 속성이 1인 경우 남은 공간(있는 경우)을 균등하게 나눕니다. 한 항목의 flex-grow 속성이 2이고 다른 항목이 모두 1인 경우 전자는 다른 항목보다 남은 공간의 두 배를 차지합니다.

3. flex-shrink 속성

flex-shrink 속성은 항목의 축소 비율을 정의합니다. 즉, 공간이 부족하면 항목이 축소됩니다.

모든 항목의 flex-shrink 속성이 1이면 공간이 부족할 때 비례하여 모두 축소됩니다. 한 항목의 flex-shrink 속성이 0이고 다른 항목이 1인 경우 전자는 공간이 부족해도 축소되지 않습니다. 이 속성에는 음수 값이 유효하지 않습니다.

4. flex-basis 속성

flex-basis 속성은 초과 공간을 할당하기 전에 항목이 차지하는 주축 공간(기본 크기)을 정의합니다. 브라우저는 이 속성을 사용하여 기본 축에 추가 공간이 있는지 계산합니다. 기본값은 프로젝트의 원래 크기인 auto입니다.

너비 또는 높이 속성과 동일한 값(예: 350px)으로 설정하면 항목이 고정된 공간을 차지합니다.

5. Flex 속성

flex 속성은 flex-grow, flex-shrink, flex-basis의 약어입니다. 기본값은 0 1 auto입니다. 마지막 두 속성은 선택 사항입니다.

6. align-self 속성

align-self 속성을 사용하면 단일 항목이 다른 항목과 다른 정렬을 가질 수 있으며 align-items 속성을 재정의할 수 있습니다. 기본값은 auto입니다. 이는 상위 요소의 align-items 속성을 상속함을 의미합니다. 상위 요소가 없으면 Stretch와 동일합니다. 이 속성은 6개의 값을 가질 수 있으며, auto를 제외하고 나머지는 align-items 속성과 동일합니다.

위 내용은 CSS3의 Flex 레이아웃에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!