⭐ Flex 란?

Flex는 행과 열 형태로 레이아웃을 쉽게 배치할수 있는 메서드이다. Flexbox 나 Flexible Box 라고 불리기도 한다. flexbox는 Flex Container와 Flex Item으로 구성되어있다. Flex의 속성들은 컨테이너에 적용하는 속성, 아이템에 적용하는 속성 총 두가지로 나뉘어진다. 컨테이너가 Flex의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떠한 형태로 배치되는 것 이라고 생각하면된다.

⭐ Flex container의 속성

✔ display: flex;

display: flex; 는 내가 이 container를 flex로 사용하겠다라고 선언해주는 역할이다.

.container {
	display: flex;
}

flex의 item들은 가로방향으로 배치되고, 자신이 가진 내용물의 width만큼만 차지하게 된다. height는 container의 높이만큼 늘어나게 된다.

여기서 item이 배치된 방향의 축을 메인축(Main Axis), 메인축과 수직인 축을 교차축(Cross Axis)이라고 한다.

✔ flex-direction 배치 방향 설정

flex-direction 은 item들이 배치되는 축의 방향을 결정하는 속성이다. 기본값은 row이다.

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

✔ flex-wrap 줄넘김 처리 설정

container 가 더 이상 item들을 한 줄에 담을 공간이 없을 때, item의 줄바꿈을 결정하는 속성이다. 기본값은 nowrap이다.

.container {
	flex-wrap: nowrap;
	/* flex-wrap: wrap; */
	/* flex-wrap: wrap-reverse; */
}

✔ flex-flow

flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성이다. flex-direction과 flex-wrap 순으로 한 칸 띄어주고 작성하면 된다.

.container {
	flex-flow: row wrap;
	/* 아래의 두 줄을 줄여 쓴 것 */
	/* flex-direction: row; */
	/* flex-wrap: wrap; */
}

✔ justify-content 메인축 방향 정렬

메인축 방향으로 item들을 정렬하는 속성이다. 기본값은 flex-start 이다.

.container {
	justify-content: flex-start;
	/* justify-content: flex-end; */
	/* justify-content: center; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}

✔ align-items 수직축 방향 정렬

수직축 방향으로 item들을 정렬하는 속성이다. 기본값은 stretch이다.

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

Tip❗❗

justify-content: center;
align-item: center;

를 해주면, item을 한가운데에 놓을 수 있다.

✔ align-content 여러 행 정렬

flex-wrap: wrap;이 설정된 상태에서, item들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성이다. 기본값은 stretch이다.

.container {
	flex-wrap: wrap;
	align-content: stretch;
	/* align-content: flex-start; */
	/* align-content: flex-end; */
	/* align-content: center; */
	/* align-content: space-between; */
	/* align-content: space-around; */
	/* align-content: space-evenly; */
}

⭐ Flex item의 속성

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

flex-basis는 item의 기본 크기를 설정한다. (flex-direction이 row일 때는 너비, column일 때는 높이) flex-basis의 값으로는 width나 height에 사용하는 각종 단위가 들어갈 수 있고, 기본값 auto는 해당 item의 width값이 들어간다. content는 컨텐츠의 크기로 width를 따로 설정하지 않은 경우와 같다.

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

✔ flex-grow 유연하게 늘리기

flex-grow는 item이 flex-basis의 값보다 커질 수 있는지를 결정하는 속성이다. 0과 0보다 큰값이 들어가며, 기본값은 0이다. flex-grow에 들어가는 숫자의 의미는 item들의 flex-basis를 제외한 여백 부분을 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; }

✔ flex-shrink 유연하게 줄이기

flex-shrink는 flex-grow와 쌍을 이루는 속성으로 item이 flex-basis의 값보다 작아질 수 있는지를 결정한다. 0과 0보다 큰값이 들어가며, 기본값은 1이다. flex-shrink를 0으로 세팅하면 **item의 크기가 flex-basis보다 작아지지 않기** 때문에 고정폭의 컬럼을 쉽게 만들 수 있다.

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

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

✔ flex 유연하게 줄이기

flex -grow flex-shrink flex-basis를 한꺼번에 지정할 수 있는 단축 속성이다.

.item {
	flex: 1;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
	flex: 1 1 auto;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
	flex: 1 500px;
	/* flex-grow: 1; flex-shrink: 1; flex-basis: 500px; */
}

만약, flex-basis값을 다음과 같이 0으로 둔다면 기본 점유크기가 0이 되고, 결국 전체 크기를 1:2:1 로 나누어 가져서 영역 자체의 크기가 정확히 1:2:1이 된다.

.item {
	flex: 1 1 0;
}
.item:nth-child(2) {
	flex: 2 1 0;
}

✔ align-self 수직축으로 item정렬

align-items의 item버전으로 해당 item의 수직축 방향 정렬이다. 기본값은 auto로 기본적으로 align-items 설정을 상속받는다.

.item {
	align-self: auto;
	/* align-self: stretch; */
	/* align-self: flex-start; */   <-CCC 설정
	/* align-self: flex-end; */
	/* align-self: center; */   <-BBB 설정 
	/* align-self: baseline; */
}

✔ order 배치 순서

각 item들의 시각적 나열 순서를 결정한다. html 자체의 구조를 바꾸는것이 아니므로, 시각장애인분들이 스크린 리더로 화면을 읽을때는 의미가 없어지는 속성이므로 주의한다.

.item:nth-child(1) { order: 3; } /* A */
.item:nth-child(2) { order: 1; } /* B */
.item:nth-child(3) { order: 2; } /* C */

✔ z-index

숫자가 클수록 위로 올라온다.

.item:nth-child(2) {
	z-index: 1;
	transform: scale(2);
}
/* z-index를 설정 안하면 0이므로, 1만 설정해도 나머지 아이템을 보다 위로 올라온다 */

📚 Ref

https://studiomeal.com/archives/197