Flex는 유연한 상자의 약어로 "유연한 레이아웃"으로 번역됩니다. 상자 모델에 최대 유연성을 제공하는 데 사용됩니다. 모든 컨테이너는 "display:flex"만 설정하면 됩니다. ; 인라인 요소는 "display:inline-flex"가 구현되어 설정될 수 있습니다. flex 레이아웃이 설정된 경우 하위 요소의 부동, 투명 및 수직 정렬 속성이 유효하지 않습니다.
1. 기본 개념
Flex 레이아웃은 Flexbox라고 불리는 레이아웃 모델입니다. Flex 레이아웃을 사용한 후에는 하위 요소에 대한 강력한 공간 할당 및 정렬 기능을 제공합니다.
Flex 레이아웃을 사용하기 전에 일반적으로 사용되는 레이아웃에는 유동 레이아웃, 플로팅 레이아웃, 위치 지정 레이아웃 등이 있습니다. 단점은 자식 요소가 부모 요소에서 자신의 위치를 제어해야 하고 부모 요소의 높이 축소에도 주의를 기울여야 한다는 것입니다.
flex의 장점은 유연하지 않은 레이아웃 형식을 피하고, 선택할 수 있는 더 많은 레이아웃 모드를 만들고, 하위 요소의 정렬, 배포, 응답성과 같은 문제를 해결한다는 것입니다. 단점은 자체 레이아웃 모드에만 의존할 수 있고, 약간의 변경이 있으면 변경할 수 없다는 점입니다.
Flex 레이아웃을 사용하는 요소를 Flex 컨테이너, 줄여서 "컨테이너"라고 합니다. 모든 하위 요소는 "항목"이라고 하는 플렉스 항목(플렉스 항목)이라는 컨테이너 멤버를 자동으로 생성합니다.
컨테이너에는 기본적으로 가로 주축(주축)과 세로 교차축(교차축)이라는 두 개의 주축이 있습니다. 주축의 시작 위치(즉, 테두리의 교차점)를 주 시작이라고 합니다. 끝 위치를 메인 끝이라고 합니다. 교차 축의 시작 위치를 교차 시작이라고 하며 끝 위치를 교차 끝이라고 합니다. 기본적으로 항목은 기본 축을 따라 배열됩니다. 단일 항목이 차지하는 주축 공간을 기본 크기라고 하며, 단일 항목이 차지하는 교차 축 공간을 교차 크기라고 합니다.
Flex 레이아웃을 구현하기 위해 CSS에는 다음 속성이 제공됩니다.
다양한 범위에 따라 이러한 속성은 컨테이너 속성(flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content)과 항목 속성(order, align -self)의 두 가지 범주로 나눌 수 있습니다. , flex, flex-grow, flex-shrink, flex-basis). 이러한 속성의 사용법을 소개하겠습니다.
2. 컨테이너 속성
(1) flex-direction : 유연한 상자에서 하위 요소의 배열 방향을 지정합니다.
속성의 선택적 값은 다음과 같습니다.
flex-direction 속성은 주축의 방향(즉, 항목의 배열 방향)을 결정합니다.
.box{flex-direction:row|row-reverse|column|column-reverse;}이 속성에는 4개의 값이 있습니다.
● 행(기본값): 주축이 수평이고 시작점이 왼쪽 끝에 있습니다.
●row-reverse: 주축이 수평이고 시작점이 오른쪽 끝에 있습니다.
●column: 주축은 수직이고 시작점은 위쪽 가장자리에 있습니다.
●column-reverse: 주축이 수직이고 시작점이 아래쪽 가장자리에 있습니다.
위의 효과는 아래 그림에 나와 있습니다.
(2) flex-wrap : 유연한 상자에서 하위 요소의 포장 방법을 지정합니다.
기본적으로 항목은 한 줄("축"이라고도 함)에 정렬됩니다. flex-wrap 속성은 축을 정렬할 수 없는 경우 줄을 바꾸는 방법을 정의합니다.
.box{flex-wrap:nowrap|wrap|wrap-reverse}● nowrap(기본값): 줄 바꿈이 없으며 정렬 효과는 다음과 같습니다.
●wrap: 감싸기, 첫 번째 줄이 맨 위에 위치, 배열 효과는 다음과 같습니다.
●wrap-reverse: 줄 바꿈, 첫 번째 줄이 맨 아래에 있으며 배열 효과는 다음과 같습니다.
(3) flex-flow : 이 속성은 플렉스 박스 컨테이너에 작용하며 컨테이너 내 요소의 배열 방향과 줄 바꿈을 제어하는 데 사용됩니다. 이 속성은 flex-direction과 flex-wrap으로 구성된 복합 속성입니다.
.box{플렉스 흐름:<플렉스 방향><플렉스 랩>;}(4) justify-content : 이 속성은 유연한 상자 컨테이너의 하위 요소에 작용하며 하위 요소 자체의 배열 방향 분포를 제어하는 데 사용됩니다.
justify-content 속성은 주축의 항목 정렬을 정의합니다.
.box{justify-content:flex-start|flex-end|center|space-between|space-around;}이 속성에는 5개의 값이 있습니다.
● flex-start(기본값): 왼쪽 정렬;
●flex-end: 오른쪽 정렬;
●center: 중앙에 위치;
●space-between: 양쪽 끝을 정렬하고 항목 사이의 간격을 동일하게 합니다.
●space-around: 각 항목의 양쪽 간격이 동일하므로 항목 사이의 간격은 항목과 테두리 사이의 간격의 두 배입니다.
위의 효과는 아래 그림에 나와 있습니다.
(5) align-items : 이 속성은 유연한 상자 컨테이너에 작용하며 배열 방향의 수직 방향으로 유연한 상자의 모든 하위 요소 정렬을 제어하는 데 사용됩니다.
align-item 속성은 항목이 교차축에 정렬되는 방식을 정의합니다.
.box{align-items:flex-start|flex-end|center|baseline|stretch;}이 속성에는 5개의 값이 있습니다. 특정 정렬은 교차 축의 방향과 관련됩니다. 교차 축은 위에서 아래로 가정됩니다.
●flex-start: 교차축의 시작점을 정렬합니다.
●flex-end: 교차축의 중간점을 정렬합니다.
●center: 교차축의 중간점을 정렬합니다.
●기준선: 항목 텍스트의 첫 번째 줄의 기준선 정렬입니다.
●늘이기(기본값): 항목이 높이를 설정하지 않거나 자동으로 설정된 경우 컨테이너의 전체 높이를 차지합니다.
위의 효과는 아래 그림에 나와 있습니다.
3. 프로젝트 속성
(1) 주문 속성
순서 속성은 컨테이너에 항목이 나타나는 순서를 설정하는 데 사용됩니다. 속성의 구문 형식은 다음과 같습니다.
순서:번호;
여기서 number는 컨테이너에 있는 항목의 위치이고 기본값은 0입니다.
예:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;margin-top:10px;}.flexdiv{width:60px;height:60px;margin-bottom:5px; border:1pxsolidblack;}.flexdiv:nth-child(1){order:3;}.flexdiv:nth-child( 2){순서:1;}.flexdiv:nth-child(3){순서:2;}.flexdiv:nth-child(4){순서:5;}.flexdiv:nth-child(5){순서: 4;</style></head><body><div><div>A</div><div>B</div><div>C</div><div>D</div><div >E</div></div></body></html>실행 결과:
(2) align-self 속성
align-s elf 속성을 사용하면 항목에 대해 다른 항목과 다른 정렬을 설정할 수 있습니다. 이 속성은 align-items 속성의 값을 재정의할 수 있습니다. align-self 속성의 선택적 값은 다음과 같습니다.
예:
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;height:150px;}.flexdiv{너비: 60px;높이:60px;테두리:1 pxsolidblack;}.flexdiv:nth-child(3){align-self:flex-start;}</style></head><body><div><div>A</div><div>B</ div><div>C</div><div>D</div><div>E</div></div></body></html>실행 결과:
(3)플렉스 속성
flex 속성은 flex-grow, flex-shrink 및 flex-basis 세 가지 속성의 약어입니다. 구문 형식은 다음과 같습니다.
flex:flex-growflex-shrinkflex-basis;
매개변수 설명은 다음과 같습니다:
● flex-grow: (필수 매개변수) 다른 항목에 비해 해당 항목의 증가 정도를 설정하는 데 사용되는 숫자, 기본값은 0입니다.
●flex-shrink: (선택적 매개변수) 다른 항목에 비해 항목의 축소를 설정하는 데 사용되는 숫자입니다. 기본값은 1입니다.
●flex-basis: (선택 매개변수) 항목의 길이, 유효한 값은 auto(기본값, 자동을 나타냄), 상속(상위 요소에서 이 속성의 값을 상속함을 나타냄) 또는 %, px, em을 추가함 등을 특정 값으로 단위의 형태.
또한 flex 속성에는 auto(1 1 자동)와 none(0 0 자동)이라는 두 가지 바로가기 값이 있습니다.
샘플 코드는 다음과 같습니다.
<!DOCTYPEhtml><html><head><style>.flex{display:flex;flex-flow:rowwrap;align-items:flex-end;border:1pxsolid#CCC;}.flexdiv{width:60px;height: 60px;border:1pxsolidblack;}.f lexdiv:nth-child(2){flex:0;}.flexdiv:nth-child(4){flex:11auto;}</style></head><body><div><div>A</div ><div>B</div><div>C</div><div>D</div><div>E</div></div></body></html>실행 결과:
