Flex 레이아웃의 기본 구문에 대한 자세한 소개

이 글은 플렉스 레이아웃의 기본 구문에 대해 자세히 소개합니다. 필요한 친구가 참고할 수 있기를 바랍니다.

2009년 W3C는 다양한 페이지 레이아웃을 간단하고 완전하며 반응적으로 구현할 수 있는 Flex 레이아웃이라는 새로운 솔루션을 제안했습니다. 현재 모든 브라우저에서 지원되므로 이제 이 기능을 사용해도 안전합니다

1. Flex 레이아웃이란 무엇인가요?

Flex는 유연한 상자(Flexible Box)의 약자로 "탄력성 있는" 레이아웃"을 사용합니다. 박스 모델에 최대한의 유연성을 제공하기 위해

flex 레이아웃: .box{display:flex;}

인라인 요소도 flex 레이아웃을 사용할 수 있습니다: .box{display:inline-flex;}

Webkit 코어가 있는 브라우저는 추가해야 합니다. -webkit 접두사: .box{display:-webkit-flex; display:flex;}

Flex 레이아웃으로 설정한 후에는 하위 요소의 부동, 투명 및 수직 정렬 속성이 유효하지 않습니다.

2. 기본 개념

Flex 컨테이너(Flex 컨테이너): Flex 레이아웃을 채택한 요소를 Flex 컨테이너라고 합니다.

Flex 항목(Flex 항목): Flex 컨테이너의 모든 하위 요소는 자동으로 컨테이너 구성원이 됩니다. Flex 프로젝트입니다.

컨테이너의 두 축: 가로 주축(주축), 세로 교차축(교차축).

주축(주축): 시작 위치->주 시작, 끝 위치->

교차축: 시작 위치->교차 시작, 끝 위치->교차 끝

컨테이너에서 단일 항목이 차지하는 주축 공간을-이라고 합니다. >기본 크기, 교차 축 공간을 ->cross size

3. FLex 속성

flex 속성은 container 속성과 item 속성으로 구분됩니다.

container 속성: flex -direction, flex-wrap, flex -flow, justify-content, align-items, align-content

항목 속성: order, flex-grow, flex-shrink, flex-basis, flex, align-self

3.1 컨테이너property

flex- 방향: 주축의 방향을 결정합니다(즉, 항목 배열 방향)

　row: 가로 방향, 왼쪽에서 오른쪽으로(기본 속성)

　row-reverse: 가로 방향. , 오른쪽에서 왼쪽으로.

　column: 세로 방향, 위에서 아래로.

　column-reverse: 세로 방향, 아래에서 위로.

flex-wrap: 축 선이 맞지 않을 경우 줄 바꿈 방법을 지정합니다. .

　nowrap: 줄 바꿈 없음(기본 속성)

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

　wrap-reverse: 줄 바꿈, 첫 번째 줄이 아래쪽에 있음,(단 줄 수는 반대이고 한 줄은 여전히 ​​왼쪽에서 오른쪽으로 배열되며 모든 줄은 그대로입니다.

flex-flow : flex-direction과 flex-wrap을 결합하여 다음과 같이 작성합니다

　.box{flex-flow :column Wrap-reverse}

justify-content : 주축의 항목 정렬 정의

　flex-start : 왼쪽 정렬(기본값), 항목은 주축의 시작점에 정렬됩니다

flex-end: 오른쪽 정렬, 항목은 주축 끝점에 정렬

　center: 중앙

　space-between: 양쪽 끝 정렬, 항목 간 간격이 동일함

　space-around: 각 항목이 동일하게 정렬됨 양쪽에 간격을 두고 있습니다. 따라서 항목 사이의 거리는 항목과 테두리 사이의 거리의 두 배입니다

align-items: 교차 축에서 항목 정렬을 정의합니다(한 줄, 여러 줄 정렬만 align-content로 정의됩니다. )

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

　flex-start: 항목의 시작점을 위에서 아래로 가져옵니다. 교차축을 기준점으로, 끝점까지 연장

　flex-end : 아래에서 위로 교차축의 끝점을 기준점으로 하여 시작점을 향해 확장

　center : 교차축의 중간점 정렬 , 항목의 중간점을 교차 축의 중간점에 배치합니다.

　baseline: 행의 각 항목의 중심점을 가져옵니다. 텍스트의 첫 번째 줄이 정렬됩니다.

align-content: 항목을 따라 정렬을 정의합니다. 컨테이너에 여러 줄 항목이 있는 경우 항목에 축이 하나만 있으면 이 속성이 작동하지 않습니다

　stretch: 축 전체 교차 축을 차지합니다(각 행에는 축이 있음). 기본 속성은

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

　flex-end : 교차축의 끝점에 맞춰 정렬

　center : 교차축의 중간점에 맞춰 정렬 Alignment

　Space-between : 여러 줄 항목 교차 축에서 균일한 간격으로 배치됩니다.

　space-around: 여러 줄 항목이 교차 축의 양쪽에 동일한 간격으로 배치됩니다. 따라서 교차축의 항목 사이의 거리는 항목과 테두리 사이의 거리의 두 배입니다

　참고: justify-content, align-items 및 align-content는 프로젝트의 속성이 아니라 컨테이너의 항목을 축의 특정 위치에 정렬하도록 설정하는 것입니다

3.2 프로젝트 속성

order: 항목의 순서를 정의합니다. 값이 작을수록 배열이 높아집니다. 기본값은 0이며 다음과 같이 작성됩니다

　　.item{order:5}

flex-grow: Scale을 확대할 속성 항목을 정의합니다. 기본값은 1

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

flex-shrink: 항목의 수축 비율을 정의합니다. 기본값은 은 1

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

flex-basis: 초과 공간을 할당하기 전에 플렉스 기준을 정의합니다. 프로젝트가 차지하는 주축 공간(기본 크기), 브라우저는 이 속성을 기반으로 주축에 추가 공간이 있는지 여부를 계산합니다. 기본값은 항목의 원래 크기인 자동입니다

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

flex: flex와 결합 - 성장, flex-shrink 및 flex-basis 속성으로 기본값은 0 1 auto이므로 먼저 사용하는 것이 좋습니다

　 이 속성에는 두 가지 단축키 값이 있습니다: auto(1 1 auto) 및 없음(0 0 auto

align-self: 단일 항목을 다른 항목과 다르게 정렬할 수 있으며 align-items 속성을 재정의할 수 있습니다. 기본값은 auto입니다. 이는 정렬을 상속한다는 의미입니다. -상위 요소의 항목 속성. 상위 요소가 없으면 Stretch

　이 속성은 6개의 값을 가질 수 있으며, 나머지는 align-items 속성과 완전히 일치합니다

[관련 권장사항: CSS 동영상 튜토리얼]

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