(본 글은 1분코딩님의 https://studiomeal.com/archives/197를 참조하였습니다.)

[Item에 적용하는 속성]

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

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

: Flex Item의 기본 크기를 설정합니다. (flex-direction이 row -> width
                                                                                         column -> height)

• auto일 때는 content의 크기로 된다.
• 100px으로 설정하면, 100px이 안되면 100px이 되고, 넘으면 그대로 유지!
• width : 100px; 으로 하면 모두다 100px으로 된다.

---

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

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

: flex-basis보다 커질 수 있는지 결정하는 속성 (0 / 0보다 큰 수)

• 숫자의 의미는 flex-basis를 제외한 여백 부분을 나누는 비율을 의미한다.

/* 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 ( 유연하게 줄이기 )

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

: flex-basis보다 작아질 수 있는지 결정하는 속성 (0 / 0보다 큰 수)

• 기본값이 1이기 때문에 flex-basis보다 작아질 수 있다.

---

• flex ( basis + grow + shrink )

.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 + flex-grow + flex-shrink 한번에 사용하는 속성

• 여백의 비가 아닌 영역 자체를 원하는 비율로 분할하기 위해서는 flex-basis를 0으로 한다!

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

---

• align-self ( 수직축으로 아이템 정렬 )

.item {
	align-self: auto;
	/* align-self: stretch; */
	/* align-self: flex-start; */
	/* align-self: flex-end; */
	/* align-self: center; */
	/* align-self: baseline; */
}

: Item 하나하나 각각 개별에 대해 수직축으로 정렬을 시키는 속성
(Container의 전체 아이템 수직 정렬인 align-items보다 우선순위이다!)

---

• order ( 배치 순서 )

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

: 각 아이템들의 시각적 나열순서를 결정하는 속성

---

• z-index ( Z축 정렬 )

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

: z축으로 정렬을 할 수 있다. (1만 설정해도 나머지 아이템보다 위로 올라온다!)

---