flex 속성

flex 속성은 flex-basis, flex-shrink 및 flex-grow를 위한 단축 속성입니다.

적용 대상: 개별 flex 항목.

값의 순서는 중요하지 않습니다. 두 번째와 세 번째 매개변수(flex-shrink, flex-basis) 는 필수가 아닙니다.

값

각 속성의 설명을 참조하세요.

기본값: 0 1 auto.

예제

3개의 항목이 있다고 가정합니다. 각 항목의 너비는 200px이며 총합은 600px입니다. 이는 부모 컨테이너의 너비인 300px보다 큽니다. 첫 번째 항목의 너비를 200px, 두 번째 항목은 300px, 세 번째 항목은 100px로 설정해 봅시다. 모든 항목의 flex-basis 값은 1로, flex-shrink 값은 항목의 순서에 따라 각각 1, 2, 3로 설정합니다:

<div class="parent">
	<div class="child elem1">1</div>
	<div class="child elem2">2</div>
	<div class="child elem3">3</div>
</div>

.parent {
	display: flex;
	width: 350px;
	height: 200px;
	border: 1px solid red;
}
.child {
	width: 200px;
	height: 50px;
	border: 1px solid green;
}
.elem1 {
	flex: 200px 1 1;
}
.elem2 {
	flex: 300px 1 2;
}
.elem3 {
	flex: 100px 1 3;
}

함께 보기

flex-direction 속성,
Flex 항목의 축 방향을 설정함
justify-content 속성,
주축을 따라 정렬을 설정함
align-items 속성,
교차축을 따라 정렬을 설정함
flex-wrap 속성,
Flex 항목의 다중 줄 설정을 지정함
flex-flow 속성,
flex-direction과 flex-wrap의 단축 속성
order 속성,
Flex 항목의 순서를 설정함
align-self 속성,
단일 항목의 정렬을 설정함
flex-basis 속성,
개별 Flex 항목의 크기를 설정함
flex-grow 속성,
Flex 항목의 확대 가능성을 설정함
flex-shrink 속성,
Flex 항목의 축소 가능성을 설정함