CSS의 flex 단축 속성

flex 속성은 확장 비율, 축소 비율, 그리고 기본 크기 속성의 단축형입니다. 단축되는 속성의 순서는 중요하며, 다음과 같습니다: flex-grow, flex-shrink, flex-basis. 끝에서부터 속성을 생략할 수 있으며, 이 경우 기본값이 적용됩니다.

다음 코드를 flex 단축 속성을 사용하여 다시 작성하세요:

.child {
	flex-basis: 100px;
	flex-grow: 1;
	flex-shrink: 2;
}

다음 코드를 flex 단축 속성을 사용하여 다시 작성하세요:

.child {
	flex-shrink: 0.5;
	flex-grow: 2;
}

다음 코드를 flex 단축 속성을 사용하여 다시 작성하세요:

.child {
	flex-shrink: 0.5;
	flex-grow: 1;
}

다음 코드를 개별 속성으로 다시 작성하세요:

.child {
	flex: 1 2 200px;
}

다음 코드를 개별 속성으로 다시 작성하세요:

.child {
	flex: 2 0.7;
}

다음 코드를 개별 속성으로 다시 작성하세요:

.child {
	flex: 3;
}