CSS FLex에 관한 정리

Flex의 속성들은 [컨테이너]에 적용하는 속성 및 [아이템]에 적용하는 속성으로 크게 나눌 수 있습니다.

컨테이너에 적용하는 속성

display: flex;

.container {
  display: flex;
  /* display: inline-flex; */
}

See the Pen venobox sample2 by younghyeong ryu (@wangta69) on CodePen.

flex-direction

.container {
	flex-direction: row;
	/* flex-direction: column; */
	/* flex-direction: row-reverse; */
	/* flex-direction: column-reverse; */
}

See the Pen flex - display by younghyeong ryu (@wangta69) on CodePen.

align-items (수직축 방향 정렬)

.container {
	align-items: stretch;
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: center; */
	/* align-items: baseline; */
}

See the Pen flex : flex-direction by younghyeong ryu (@wangta69) on CodePen.

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

flex-basis(유연한 박스의 기본 영역)

.item {
	flex-basis: auto; /* 기본값 */
	/* flex-basis: 0; */
	/* flex-basis: 50%; */
	/* flex-basis: 300px; */
	/* flex-basis: 10rem; */
	/* flex-basis: content; */
}

See the Pen flex : align-items by younghyeong ryu (@wangta69) on CodePen.

flex-grow (유연하게 늘리기)

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

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

grow 가 적용되면 나머지 여분에 대해서 grow 의 특정 비율만큼 넓이가 적용된다.

See the Pen flex : flex-basis by younghyeong ryu (@wangta69) on CodePen.

flex-shrink (유연하게 줄이기)

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

.item:nth-child(1) {
	flex-shrink: 0;
	width: 100px;
}
.item:nth-child(2) {
	flex-grow: 1;
}

See the Pen flex : flex-grow by younghyeong ryu (@wangta69) on CodePen.