H5 가변 상자 레이아웃(상위 컨테이너 속성) 사용에 대한 자세한 소개

디스플레이 추가: 상위 컨테이너에 flex/inline-flex

상위 컨테이너가 사용할 수 있는 속성은 다음과 같습니다.

1.flex-direction: 주축의 방향을 결정합니다.

네 가지 속성 값이 있습니다.

row(기본값): 주축이 수평이고 시작점이 왼쪽 끝에 있습니다.

row-reverse : 주축이 수평이고 시작점이 오른쪽 끝이다.

열: 주축이 수직이고, 시작점이 위쪽 가장자리에 있습니다.

column-reverse: 주축이 수직이고 시작점이 아래쪽 가장자리에 있습니다.

2.flex-wrap : 한 축이 맞지 않을 경우 선을 감싸는 방법.

에는 3개의 속성 값이 있습니다.

nowrap(기본값): 줄 바꿈이 없습니다. 상위 컨테이너의 너비가 충분하지 않으면 각 항목이 적절하게 압축됩니다.

wrap: 줄 바꿈, 첫 번째 줄은 상위 컨테이너의 상단에 있습니다.

wrap-reverse: 감싸기, 첫 번째 줄은 상위 컨테이너의 맨 아래에 있습니다.

3.flex-flow: 속성은 flex-direction 속성과 flex-wrap 속성의 약어이며 기본값은 row nowrap입니다.

4.justify-content: 주축의 항목 정렬을 정의합니다.

에는 다음과 같은 속성 값이 있습니다.

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

flex-end: right- alignment

center: 가운데

space-between: 항목 사이의 간격을 동일하게 하여 양쪽 끝을 정렬합니다. (첫 번째 항목과 마지막 항목은 각각 항목의 가장 왼쪽 또는 오른쪽에 있습니다.)

space-around: 각 항목의 양쪽 간격이 동일합니다. 따라서 항목 사이의 공간은 항목과 테두리 사이의 공간의 두 배입니다. (첫 번째 항목과 마지막 항목은 상위 컨테이너의 양쪽에서 간격을 두고 배치됩니다.)

5.⑤ align-items: 항목이 교차 축에 정렬되는 방식을 정의합니다. 🎜>

속성 값은 다음과 같습니다.

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

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

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

기준선: 항목 텍스트 첫 번째 줄의 기준선 정렬입니다. (줄 높이, 글꼴 크기 등이 각 줄의 기준선에 영향을 미칩니다)

늘이기(기본값): 하위 컨테이너에 높이가 설정되지 않거나 높이가 다음으로 설정된 경우 자동이면 상위 컨테이너의 전체 높이를 차지합니다.

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

에는 다음과 같은 속성 값이 있습니다.

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

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

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

space-between: 교차축의 양쪽 끝에 정렬되며, 축 사이의 간격이 균등하게 분포됩니다.

space-around: 각 축이 양쪽에서 동일한 간격으로 배치됩니다. 따라서 축 사이의 거리는 축과 프레임 사이의 거리의 두 배입니다.

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

위 내용은 H5 가변 상자 레이아웃(상위 컨테이너 속성) 사용에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!