플렉스 레이아웃 - 검토

flex는 탄력적인 레이아웃입니다.
모든 컨테이너를 플렉스 레이아웃으로 지정할 수 있습니다.
　.box{display: flex}
인라인 요소는 flex 레이아웃을 사용할 수 있습니다.
　.box{display: inline-flex}
webkit 커널이 있는 브라우저는 -webkit 접두사를 추가해야 합니다.
　.box{display:-webkit-flex; display:flex;}
참고: 요소가 flex 레이아웃으로 설정된 후에는 하위 요소의 float,clear 및 Vertical-align 속성이 유효하지 않습니다.
기본 개념:
플렉스 레이아웃을 사용하는 요소를 플렉스 컨테이너라고 하며, 모든 하위 요소는 자동으로 플렉스
항목이라는 컨테이너 멤버가 됩니다.
컨테이너에는 기본적으로 가로 주축과 세로 교차축이라는 두 개의 축이 있습니다. 주축의 시작 위치(경계와의 교차점)를 주 시작이라고 하고, 끝 위치를 주 끝이라고 합니다.
교차 축의 시작 위치를 교차 시작, 끝 위치를 교차 시작이라고 합니다. , 기술적 위치를 크로스 엔드라고 합니다.
단일 프로젝트 주축이 차지하는 공간을 메인 사이즈, 크로스 축이 차지하는 공간을 크로스 사이즈라고 합니다.

컨테이너 속성:
컨테이너에는 6가지 속성이 설정되어 있습니다.
flex-direction flex-wrap flex-flow justify-content
align-items align-content
1.flex-direction
속성은 주축의 방향(즉, 배열 방향)을 결정합니다. 항목)
.box{flex-direction:row | row-reverse |column-reverse;}
　　　　　　row (기본값) 주축은 가로이고 시작점은 왼쪽 끝입니다.
row-reverse: 주축이 수평이고 시작점이 오른쪽 끝에 있습니다.
기둥: 주축이 수직이고, 시작점이 위쪽 가장자리에 있습니다.
Column-reverse : 주축이 수직이고 시작점이 아래쪽 가장자리에 있습니다.
　　　2. flex-wrap 속성
　　　기본적으로 항목은 한 줄(축이라고도 함)에 정렬됩니다. flex-wrap 속성은 축 줄
을 정렬할 수 없는 경우 줄을 바꾸는 방법을 정의합니다.
.box{flex-wrap: nowrap | Wrap-reverse;}
nowrap(기본값): 줄 바꿈이 없습니다.
줄 바꿈: 줄 바꿈: 줄 바꿈, 첫 번째 줄이 맨 위에 위치합니다.
wrap-reverse: Wrap-reverse: 아래 첫 번째 줄을 래핑합니다.
　　　3.flex-flow
　　　　flex-flow 속성은 flex-direction 속성과 flex-wrap 속성의 약어입니다. 기본값은 row nowrap입니다.
　　　.box{ flex-flow:< ;flex-direction> || ;}
　　　 4.justify-content 속성
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　DUQuatch in] 4.justify-content 속성
　　　 속성은 메인 화면에서 항목의 정렬을 정의합니다. 중심선.
.box{justify-content: flex-start | flex-end | center | space-between | space-around;}
5개 값, 특정 정렬은 축 방향과 관련이 있다고 가정합니다. 그 아래의 주축은 왼쪽에서 오른쪽으로의 슬레이브입니다.
flex-start(기본값): 왼쪽 정렬
flex-end 오른쪽 정렬
가운데 가운데
space-between: 정렬 항목 사이의 간격은 모두 동일합니다.
space-around: 각 항목의 양쪽 간격이 동일하므로 항목 사이의 공간은 항목과 테두리 사이의 공간의 두 배입니다.
　5.align-items
속성은 항목이 교차축에 정렬되는 방식을 정의합니다.
.box{align-items: flex-start | flex-end | center | 기준선 | 스트레치;}
특정 정렬은 교차 축 방향과 관련이 있습니다. 교차축은 위에서 아래로 켜져 있습니다.
flex-start: 교차축의 시작점을 정렬합니다.
　　　　　flex-end: 교차축의 끝점을 정렬합니다.
중앙: 교차점의 중간점을 정렬합니다.
기준선: 항목 텍스트 첫 번째 줄의 기준선 정렬입니다.
늘이기(기본값) 항목이 높이를 설정하지 않거나 자동으로 설정하면 컨테이너의 전체 높이를 차지합니다.
　6.align-content 속성
이 속성은 여러 축의 정렬을 정의합니다. 프로젝트가 하나의 축만 가질 수 있는 경우 이 속성은 효과가 없습니다.
　　　.box{align-content: flex-start | flex-end | center | space-between | space-around |
　stretch;}
속성은 6개의 값을 가질 수 있습니다.
flex-start: 교차축의 시작점에 맞춰 정렬됩니다.
flex-end: 교차축의 끝점에 맞춰 정렬됩니다.
중앙: 교차축의 중간점에 맞춰 정렬됩니다.
Space-between; 교차축의 양쪽 끝을 정렬하고 축 사이의 간격이 균등하게 분포되도록 합니다.
space-around: 각 축의 양쪽 공간이 동일합니다.

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

프로젝트 속성
프로젝트에는 6가지 속성을 설정할 수 있습니다.

flex-grow flex-shrink flex-basis flex align-self 주문

　　　1.order 속성
　　　　　order 속성은 항목의 정렬 순서를 정의하며, 가장 작은 값일수록 더 높게 정렬되며 기본값은 o입니다. -grow 속성
flex-grow 속성은 항목의 확대 비율을 정의합니다. 기본값은 0입니다. 즉, 남은 공간이 있으면 확대됩니다.
.item { flex-grow: ;}
모든 항목의 flex-grow 속성이 1인 경우 항목의 flex-grow 속성이 1인 경우 나머지 공간을 둘러쌉니다. 다른 모든 항목은 1이며 전자는 다른 항목보다 남은 공간의 두 배를 차지합니다.

　　　 3.flex-shrink 속성
　　　　　 flex-shrink 속성은 항목의 축소 비율을 정의합니다. 기본값은 1, 즉 공간이 부족하여 항목이 축소됩니다.

.item{flex-shrink:;}

모든 항목의 flex-shrink 속성이 1이면 공간이 부족할 때 비례하여 모두 축소됩니다.
한 항목의 flex-shrink 속성이 o이고 다른 항목이 1인 경우 전자
는 공간이 부족해도 축소되지 않습니다. 이 속성에는 음수 값이 유효하지 않습니다. 4. Flex-Basis 속성
Craftui는 장소에 대한 장소를 필요로해야합니다.> Flex-Basis 속성은이 속성을 기반으로 한 초과 공간을 할당하기 전에 항목이 차지하는 주요 축 공간을 정의해야합니다 🎜> 주축에 여유공간이 있는지. 기본값은 프로젝트의 원래 크기인 auto입니다.
　　　　　.item {flex-basis: | auto;}
　　　　　 너비 또는 높이 속성과 동일한 값으로 설정하면 항목이 고정된 공간을 차지합니다.
　　　5.flex 속성
　　　flex 속성은 flex-shrink와 flex 및 flex-basis의 약어입니다. 기본값
은 0 1 auto입니다.
.item { flex:none | [ 이 속성에는 두 가지가 있습니다. 바로가기 값에는 자동(1 1 자동)과 없음(0 0 자동)의 두 가지 값이 있습니다.
　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　값 ​​
　　　6.align-self 속성
　　　　　　　　　　　　　　　　　　　　　　　　　　　, 단일 항목이 동일한 속성을 가질 수 있음 할 수 있다 align 속성을 재정의합니다. 기본값은 auto입니다. 이는 상위 요소
의 align-items 속성을 상속함을 의미합니다. 상위 요소가 없으면 Stretch.
와 같습니다. : auto | flex-start | flex-end | center | Stretch;}
이 속성은 6개의 값을 가질 수 있으며, 나머지는 align-items 속성과 동일합니다.

더 많은 플렉스 레이아웃 - 관련 기사를 검토하려면 PHP 중국어 웹사이트를 주목하세요!