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

이번에는 Flex 레이아웃에 대한 자세한 설명을 가져왔습니다. Flex 레이아웃에 대한 자세한 설명의 주의사항은 무엇인가요? 실제 사례를 살펴보겠습니다.

세로 중앙 정렬은 일반적인 페이지 레이아웃 방법입니다. 인라인 요소의 경우 text-align:center;vertical-align:center를 설정하여 이를 달성할 수 있습니다.
블록 수준 요소의 경우 일반적으로 다음을 통해 수행할 수 있습니다. 다음 설정

.parent{    position: relative;
}.child{    position: absolute;    top: 50%;    left: 50%;    transform: translate(-50%,-50%);
}

그러나 CSS의 단순성과 우아함을 위해 인라인, 인라인 블록 및 블록 레이아웃 외에도 CSS의 네 번째 레이아웃 방법인 flex가 등장했습니다. 다음 설정만

.parent{    display: flex;    justify-content: center;    align-items: center;
}

참고: flex 레이아웃으로 설정하면 하위 요소의 float,clear,vertical-align 속성이 유효하지 않습니다

flex

기본 개념

flex 레이아웃을 사용하는 요소를 플렉스 컨테이너라고 합니다. 요소 내의 모든 하위 요소를 플렉스 항목이라고 합니다.

컨테이너에는 기본적으로 수평 주축과 수직 교차축이라는 두 개의 축이 있습니다.
주축의 시작 위치(경계와의 교차점)를 주 시작이라고 하고, 끝 위치를 주 끝이라고 합니다. 교차 축의 시작 위치를 교차 시작이라고 하고, 끝 위치를 교차 끝이라고 합니다.
항목은 기본적으로 주축을 따라 배열됩니다. 단일 항목이 차지하는 주축 공간을 주 크기라고 하며, 단일 항목이 차지하는 교차 축 공간을 교차 크기라고 합니다.

플렉스 컨테이너의 속성

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
flex-direction

flex-direction 속성은 주축의 방향을 결정합니다.

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

row-reverse: 주축이 가로 방향이고 시작점이 오른쪽에 있습니다. end.

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

column-reverse: 주축이 세로 방향이고 시작점이 아래쪽에 있습니다. edge.

flex-wrap

기본적으로 항목은 주축에 정렬됩니다. flex-wrap 속성은 주축의 행을 정렬할 수 없는 경우 감싸는 방법을 정의합니다.

nowrap(기본값): 줄 바꿈 없음

wrap: 줄 바꿈, 첫 번째 줄이 위쪽에 있음

wrap-reverse: 줄 바꿈, 첫 번째 줄이 아래쪽에 있음

flex-flow

flex -flow 속성은 flex-direction 속성 및 flex-wrap 속성의 약어입니다.

기본값은 row nowrap입니다.

justify-content

justify-content 속성은 주축에서 (요소의) 항목 정렬을 정의합니다.

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

flex-end: 오른쪽 정렬

center: 가운데

space-between: 항목 사이의 간격을 동일하게 하여 양쪽 끝을 정렬합니다.

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

align-items

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

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

flex-start: 교차축의 시작점을 정렬합니다.

flex-end: 교차축의 끝점을 정렬합니다.

center: 교차축의 중간점을 정렬합니다.

baseline: 항목 텍스트 첫 줄의 기준선 정렬입니다.

align-content

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

stretch(기본값): 축이 전체 교차 축을 차지합니다.

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

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

center: 교차축의 중간점에 맞춰 정렬됩니다.

space-between: 교차축의 양쪽 끝 부분에 정렬되고 축 사이의 간격이 고르게 분포됩니다.

space-around: 각 축의 양쪽 공간이 동일합니다. 따라서 축 사이의 거리는 축과 프레임 사이의 거리의 두 배입니다.

flex item(self 요소) 속성

order
flex-grow
flex-shrink
flex-basis
flex
align-self
order

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

flex-grow

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

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

flex-shrink

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

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

flex-basis

flex-basis 속성은 초과 공간을 할당하기 전에 항목의 기본 크기를 정의합니다.

이 속성을 기반으로 브라우저는 주축에 추가 공간이 있는지 계산합니다. 기본값은 프로젝트의 원래 크기인 auto입니다.
너비 또는 높이 속성과 동일한 값(예: 350px)으로 설정하면 항목이 고정된 공간을 차지합니다.

flex

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

이 속성에는 자동(1 1 자동)과 없음(0 0 자동)이라는 두 가지 단축키 값이 있습니다.

자체 정렬

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

Javascript의 관찰자 패턴

Javascript의 프록시 패턴

Javascript의 전략 패턴

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