플렉스의 속성은 무엇입니까?

flex의 속성은 다음과 같습니다: 1. flex-direction, 주축의 방향 설정 2. justify-content, 주축의 하위 요소 배열 설정 3. flex-wrap, 하위 요소의 배치 여부 설정 -elements Wrap; 4. align-content, 측면 축에 모든 하위 요소의 배열을 설정합니다. 5. align-items: 측면 축에 하위 요소의 배열을 설정합니다.

이 튜토리얼의 운영 체제: Windows 10 시스템, Dell G3 컴퓨터.

flex 속성:

1, flex-direction

주축 방향 설정

속성 값 설명

row 기본값은 왼쪽에서 오른쪽으로

row-reverse 왼쪽에서 오른쪽으로

column 위에서 다음으로

column-reverse 위에서 아래로

2, justify-content

주축에서 하위 요소의 배열을 설정합니다.

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

참고: 이것을 사용하십시오.

속성 값 설명

flex-start 속성을 사용하기 전에 어떤 주 축이 있는지 확인하십시오. flex-start 기본값은 머리부터 시작합니다(주 축이 X축인 경우 왼쪽부터 오른쪽)

flex-end 꼬리부터 배열

중심은 주축의 중심에 정렬됩니다(주축이

하위 요소 줄 바꿈 여부 설정

기본적으로 항목은 한 줄에 정렬됩니다( "축"이라고도 함). flex-wrap 속성 정의, 플렉스 레이아웃의 기본값은 줄 바꿈 없음

속성 값 설명nowrap 기본값, 줄 바꿈 없음

줄 바꿈 없음

4 align-content

배열을 설정합니다. 측면 축의 하위 요소 모드(여러 줄)

속성 값 설명

flex-start 기본값, 교차 축의 머리 부분에서 정렬 시작 flex-end 교차 축의 끝 부분에서 정렬 시작

center 교차축 중앙에 표시

space -around 아이들이 교차축을 기준으로 남은 공간을 균등하게 나눕니다

space-between 아이들이 교차축의 양쪽 끝에 먼저 배치된 후 남은 공간을 균등하게 나눕니다

stretch 하위 요소의 높이를 상위 요소의 높이와 동일하게 나누도록 설정 align-items: 교차축의 높이 설정 하위 요소 배열(단일 행)

5, align-items

설정 측면 축의 하위 요소 배열(단일 행)

속성 값 설명

flex-start 기본값, 위에서 아래로 flex-end 아래에서 위로

가운데를 함께 쥐어짜고 중앙(수직 중앙)

stretch Stretch

6, flex-flow

flex-direction과 flex-wrap 속성의 복합 속성

속성 값 설명

flex: 하위 항목의 비율

align-self: 배열 제어 자체 측면 축의 하위 항목
order: 속성은 하위 항목의 순서(앞 및 뒤 순서)를 정의합니다

위 내용은 플렉스의 속성은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!