CSS 플렉스 레이아웃(탄력적 레이아웃)의 속성은 무엇입니까? CSS 플렉스 레이아웃 속성 소개

이 기사에서 제공하는 내용은 CSS 플렉스 레이아웃(탄력적 레이아웃)의 속성이 무엇입니까? CSS 플렉스 레이아웃 속성의 도입에는 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

Flex는 "유연한 레이아웃"을 의미하는 Flex Box의 약어로, 상자 모양의 모델에 최대한의 유연성을 제공하는 데 사용됩니다. 모든 컨테이너를 Flex 레이아웃으로 지정할 수 있습니다.
참고: Flex 레이아웃으로 설정한 후에는 하위 요소의 부동, 지우기 및 수직 정렬 속성이 유효하지 않습니다.

기본 개념

Flex 레이아웃을 사용하는 요소를 Flex 컨테이너(플렉스 컨테이너)라고 하며, "컨테이너"라고도 합니다. 모든 하위 요소는 자동으로 Flex 항목(플렉스 항목) 또는 줄여서 "항목"이라고 하는 컨테이너 멤버가 됩니다.
컨테이너에는 기본적으로 수평 주축(주축)과 수직 교차축(교차축)이라는 두 개의 축이 있습니다. 주축의 시작 위치(경계와의 교차점)를 주 시작이라고 하고, 끝 위치를 주 끝이라고 합니다. 교차 축의 시작 위치를 교차 시작이라고 하며, 끝 위치를 교차 끝이라고 합니다.

컨테이너 속성

1.css flex-direction

flex-direction 속성은 주축의 방향(즉, 항목 배열 방향)을 결정합니다.
flex-direction: row | row-reverse | 열 | 열 - 역방향
row (기본값): 주축이 수평이고 시작점이 왼쪽에 있습니다.
row-reverse: 주축이 수평이고 시작점이 오른쪽 끝에 있습니다.
열: 주축이 수직이고, 시작점이 위쪽 가장자리에 있습니다.
column-reverse: 주축이 수직이고 시작점이 아래쪽 가장자리에 있습니다.

2. css flex-wrap(라인 랩)

flex-wrap 기본적으로 항목은 한 줄("축"이라고도 함)에 정렬됩니다. flex-wrap 속성은 한 축이 맞지 않는 경우 줄 바꿈 방법을 정의합니다.
flex-wrap: nowrap | Wrap-reverse
nowrap(기본값): 줄 바꿈 없음. ㅋㅋㅋ >                                                  포장 V Wrap-Reverse: 줄을 변경하면 첫 번째 줄이 아래에 있습니다.

3. css flex-flow

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

flex-flow: || ;

4.justify-content

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

justify-content: flex-start | flex-end | center | space-between | space-around;

flex-start(기본값): 왼쪽 정렬
가운데 정렬
space- 사이: 양쪽 끝에 정렬되어 항목의 간격이 동일합니다.
공간 주변: 각 항목의 양쪽 공간이 동일합니다. 따라서 항목 사이의 공간은 항목과 테두리 사이의 공간의 두 배입니다.


5. align-items

align-items 속성은 항목이 교차 축에 정렬되는 방식을 정의합니다. align-items: flex-start | flex-end | center | 기준선 | Stretch;

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

flex-end: 교차축의 끝점을 정렬합니다.
중앙: 교차축의 중간점을 정렬합니다.
기준선: 항목 텍스트 첫 번째 줄의 기준선 정렬입니다.
늘이기(기본값): 항목이 높이를 설정하지 않거나 자동으로 설정된 경우 컨테이너의 전체 높이를 차지합니다.


6. align-content

align-content 속성은 여러 축의 정렬을 정의합니다. 항목에 축이 하나만 있으면 이 속성은 효과가 없습니다. flex-start | flex-end | center | space-around | flex-start: 교차축.

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

중앙: 교차축의 중간점에 맞춰 정렬됩니다.
간격: 교차축의 양쪽 끝 부분에 정렬되며 축 사이의 간격이 균등하게 분포됩니다.
공간 주변: 각 축의 양쪽 간격이 동일합니다. 따라서 축 사이의 거리는 축과 프레임 사이의 거리의 두 배입니다.
늘이기(기본값): 축이 전체 교차 축을 차지합니다.



항목 속성

1.order

order 속성은 항목의 순서를 정의합니다. 값이 작을수록 순위가 높아집니다. 기본값은 0입니다.

2, CSS flex-grow

flex-grow 속성은 항목의 확대 비율을 정의합니다. 기본값은 0입니다. 즉, 남은 공간이 있으면 확대되지 않습니다.
모든 항목의 flex-grow 속성이 1인 경우 남은 공간(있는 경우)을 균등하게 나눕니다. 한 항목의 flex-grow 속성이 2이고 다른 항목이 모두 1인 경우 전자는 다른 항목보다 남은 공간의 두 배를 차지합니다.
*2점 및 3점 레이아웃을 구현하는 데 사용할 수 있습니다.

3. CSS flex-shrink

flex-shrink 속성은 항목의 축소 비율을 정의합니다. 공간이 부족하면 항목이 줄어듭니다.
모든 항목의 flex-shrink 속성이 1이면 공간이 부족할 때 비례하여 모두 축소됩니다. 한 항목의 flex-shrink 속성이 0이고 다른 항목이 1인 경우 전자는 공간이 부족해도 축소되지 않습니다.
이 속성에는 음수 값이 유효하지 않습니다.

4.css flex-basis

flex-basis 속성은 초과 공간을 할당하기 전에 항목이 차지하는 주축 공간(기본 크기)을 정의합니다. 브라우저는 이 속성을 사용하여 기본 축에 추가 공간이 있는지 계산합니다. 기본값은 프로젝트의 원래 크기인 auto입니다.
너비 또는 높이 속성과 동일한 값(예: 350px)으로 설정하면 항목이 고정된 공간을 차지합니다.

5. CSS flex

flex 속성은 flex-grow, flex-shrink 및 flex-basis의 약어입니다. 기본값은 0 1 auto입니다. 마지막 두 속성은 선택 사항입니다.
이 속성에는 자동(1 1 자동)과 없음(0 0 자동)이라는 두 가지 단축키 값이 있습니다.
브라우저가 관련 값을 추론하므로 세 가지 별도의 속성을 별도로 작성하는 대신 이 속성을 먼저 사용하는 것이 좋습니다.

6. align-self

align-self 속성을 사용하면 단일 항목이 다른 항목과 다른 정렬을 가질 수 있으며 align-items 속성을 재정의할 수 있습니다. 기본값은 auto입니다. 이는 상위 요소의 align-items 속성을 상속함을 의미합니다. 상위 요소가 없으면 Stretch와 동일합니다. ㅋㅋㅋ

CSS

유연한 상자 모델 flex레이아웃의 애플리케이션

위 내용은 CSS 플렉스 레이아웃(탄력적 레이아웃)의 속성은 무엇입니까? CSS 플렉스 레이아웃 속성 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!