집 >웹 프론트엔드 >JS 튜토리얼 >Flex 레이아웃에 대한 자세한 설명

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

php中世界最好的语言원래의: 2018-03-13 18:04:122260검색

이번에는 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!