위챗 미니 프로그램 - Flex Layout이란 무엇인가요?

Flex는 유연한 상자(Flexible Box)의 약어로 "유연한 레이아웃"을 의미하며 상자 모양의 모델에 최대한의 유연성을 제공하는 데 사용됩니다. [추천 튜토리얼: 작은프로그램 개발 튜토리얼]

모든 컨테이너는 Flex 레이아웃으로 지정할 수 있습니다.

.box{ display: flex; }

인라인 요소도 Flex 레이아웃을 사용할 수 있습니다.

.box{ display: inline-flex; }

Webkit 코어가 있는 브라우저는 -webkit 접두사를 추가해야 합니다.

.box{ display: -webkit-flex; /* Safari */ display: flex; }

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

Flex 기본 개념
Flex 레이아웃을 사용하는 요소를 Flex 컨테이너(플렉스 컨테이너)라고 하며, "컨테이너"라고도 합니다. 모든 하위 요소는 자동으로 Flex 항목(플렉스 항목) 또는 줄여서 "항목"이라고 하는 컨테이너 멤버가 됩니다.

컨테이너에는 기본적으로 가로 주축(주축)과 세로 교차축(교차축)이라는 두 개의 축이 있습니다. 주축의 시작 위치(경계와의 교차점)를 주 시작이라고 하고, 끝 위치를 주 끝이라고 합니다. 교차 축의 시작 위치를 교차 시작이라고 하며, 끝 위치를 교차 끝이라고 합니다.

항목은 기본적으로 주축을 따라 정렬됩니다. 단일 프로젝트가 차지하는 주축 공간을 메인 사이즈, 단일 항목이 차지하는 교차축 공간을 크로스 사이즈라고 합니다.

컨테이너 속성

ℓ flex-direction: 이 속성은 주축의 방향(즉, 항목의 배열 방향)을 결정합니다. (왼쪽, 가운데, 오른쪽, 위, 가운데, 아래)

ℓ flex-wrap: 속성 정의, 하나의 축선을 배치할 수 없는 경우 선을 감싸는 방법.

litz flex-flow: flex-direction 속성과 flex-wrap 속성의 약식입니다. 기본값은 row nowrap

Ÿ justify-content: 속성입니다. 주축 정렬에서 항목의 위치를 ​​정의합니다. (왼쪽, 가운데, 오른쪽)

litz align-items: 속성은 항목이 교차축에 정렬되는 방식을 정의합니다. (상단, 중앙, 하단)

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

위 내용은 위챗 미니 프로그램 - Flex Layout이란 무엇인가요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!