Flex 핵심정리 #4 - 유연한 박스

이 게시글은 [CSS Flex와 Grid 제대로 익히기]의 강의를 보며 정리한 내용입니다.

출처: https://www.inflearn.com/course/css-flex-grid-%EC%A0%9C%EB%8C%80%EB%A1%9C-%EC%9D%B5%ED%9E%88%EA%B8%B0/dashboard

CSS Flex와 Grid 제대로 익히기 강의 | 1분코딩 - 인프런

출처: https://studiomeal.com/archives/197

이번에야말로 CSS Flex를 익혀보자

 

---

 

Flex 아이템에 적용하는 속성들

flex-basis: 최소 영역

.item {
	flex-basis: auto; /* 기본값 */
	/* 값, %, px, content등 다양한 옵션이 들어갈 수 있다 */
	/* flex-basis: 0; */
	/* flex-basis: 50%; */
	/* flex-basis: 300px; */
	/* flex-basis: 10rem; */
	/* flex-basis: content; */
}

 

flex-basis와 width의 차이점

.item {
	flex-basis: 100px;
}

width가 100px이 안되는 AAA, CCC는 늘어나고, 원래 100px이 넘는 BBB는 그대로 유지

 

.item {
	width: 100px;
}

flex-basis가 아닌 with를 사용하면 이렇게 100px로 고정된다

 

flex-grow: 유연하게 늘리기

flex-grow에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 됩니다.

.item {
	flex-grow: 1;
	/* flex-grow: 0; */ /* 기본값 */
}

flex-grow: 1 값으로 셋팅하면 item이 늘어나며 여백을 채우게 된다

그럼 숫자의 의미는 뭐냐?

/* 1:2:1의 비율로 세팅할 경우 */
.item:nth-child(1) { flex-grow: 1; }
.item:nth-child(2) { flex-grow: 2; }
.item:nth-child(3) { flex-grow: 1; }

여백의 비율이 1:2:1로 설정됨

 

flex-shrink: 유연하게 줄이기

flex-shrink는 flex-grow와 쌍을 이루는 속성으로, 아이템이 flex-basis의 값보다 작아질 수 있는지를 결정합니다.
flex-shrink에는 숫자값이 들어가는데, 몇이든 일단 0보다 큰 값이 세팅이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 flex-basis보다 작아집니다.
기본값이 1이기 때문에 따로 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수 있었습니다.

.item {
	flex-basis: 150px;
	flex-shrink: 1; /* 기본값 */
}

flex-shrink를 0으로 세팅하면 아이템의 크기가 flex-basis보다 작아지지 않기 때문에 고정폭의 컬럼을 쉽게 만들 수 있어요. 고정 크기는 width로 설정합니다.
아주 자주 쓰는, 이런↓ 레이아웃도 손쉽게!