유연한 상자 모델 플렉스 방법 요약

유연한 레이아웃

2009년 W3C는 다양한 페이지 레이아웃을 간단하고 완전하며 반응적으로 구현할 수 있는 새로운 솔루션인 Flex 레이아웃(탄력적 레이아웃)을 제안했습니다.

전통적인 박스 모델:
일반적인 레이아웃에는 플로팅 포지셔닝을 통해 배치되는 박스 모델을 사용합니다.
line 요소와 inline 블록 요소는 줄바꿈되지 않으며, 블록 요소는 단독 라인을 차지합니다. 플로트는 블록 요소를 수평으로 정렬하는 데 사용할 수 있습니다.
그러나 일부 특수 레이아웃은 구현하기 어렵습니다. 수직 센터링과 같은.

유연한 상자를 설정한 후 상자 내부의 요소는 행 요소와 블록 요소로 구분되지 않으며 부동 소수점은 유효하지 않습니다.

플렉스 레이아웃을 사용하는 요소는 플렉스 컨테이너, 줄여서 컨테이너라고 합니다.
컨테이너의 모든 하위 요소는 플렉스 아이템, 줄여서 아이템이라고 합니다.

컨테이너 속성:

flex-direction: 방향. of the main axis

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

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

---

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

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

flex-wrap: 한 축이 맞지 않는 경우 감싸는 방법.
nowrap(기본값): 줄 바꿈이 없습니다.
wrap: 첫 번째 줄이 맨 위에 오도록 래핑합니다.
wrap-reverse: 아래 첫 번째 줄을 래핑합니다.

justify-content: 주축의 항목 정렬입니다. flex-start(기본값): 왼쪽 정렬
flex-end: 오른쪽 정렬
center: 가운데
space-between: 양쪽 끝 정렬, 항목 간 간격 동일.

space-around: 각 항목이 양쪽에 동일한 간격으로 배치되어 있습니다. 따라서 항목 사이의 공간은 항목과 테두리 사이의 공간의 두 배입니다.

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

flex-start: 교차축의 시작점을 정렬합니다.
flex-end: 교차축의 끝점을 정렬합니다.
center: 교차축의 중간점을 정렬합니다.
기준선: 항목 텍스트 첫 번째 줄의 기준선 정렬입니다.

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

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

flex-start: 교차축의 시작점에 맞춰 정렬합니다.
flex-end: 교차축의 끝점에 맞춰 정렬합니다.
center: 교차축의 중간점에 맞춰 정렬됩니다.
space-between: 교차축의 양쪽 끝 부분에 정렬되며 축 사이의 간격이 균등하게 분포됩니다.

space-around: 각 축의 양쪽 공간이 동일합니다. 따라서 축 사이의 거리는 축과 프레임 사이의 거리의 두 배입니다.

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


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

---

flex-grow

: 항목의 확대 비율을 정의합니다. 기본값은 0입니다. 즉, 남은 공간이 있으면 확대되지 않습니다.

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

flex-shrink

: 항목의 축소 비율을 정의합니다. 기본값은 1입니다. 즉, 공간이 부족하면 항목이 축소됩니다.

flex-basis
: 초과 공간이 할당되기 전에 항목이 차지한 주축 공간입니다. 너비 또는 높이 속성과 동일한 값(예: 350px)으로 설정할 수 있으며 항목은 고정된 공간을 차지합니다.

align-self: align-items 속성을 재정의하여 단일 항목을 다른 항목과 다르게 정렬할 수 있습니다. 기본값은 auto입니다. 이는 상위 요소의 align-items 속성을 상속함을 의미합니다. 상위 요소가 없으면 Stretch와 동일합니다. 이 속성은 6개의 값을 가질 수 있으며, auto를 제외하고 나머지는 align-items 속성과 동일합니다.

flex:0 1 auto; flex:0 0 auto; 확대 또는 확대 불가의 약어: flex:none; flex:auto; flex: 1 1 auto;

위 내용은 유연한 상자 모델 플렉스 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!