CSS - FLEX 공부하기

출처

• https://studiomeal.com/archives/197

---

flex-direction

.container {

flex-direction: row;

/* flex-direction: column; */

/* flex-direction: row-reverse; */

/* flex-direction: column-reverse; */

}

flex-item들의 정렬 방향을 설정한다. row면 가로 column이면 세로로 정렬한다.

---

flex-wrap

.container {

flex-wrap: nowrap;

/* flex-wrap: wrap; */

/* flex-wrap: wrap-reverse; */

}

컨테이너가 더 이상 아이템들을 한 줄에 담을 여유 공간이 없을 때 아이템 줄바꿈을 어떻게 처리 할지 결정하는 속성이다.

---

justify-conten

.container {

justify-content: flex-start;

/* justify-content: flex-end; */

/* justify-content: center; */

/* justify-content: space-between; */

/* justify-content: space-around; */

/* justify-content: space-evenly; */

}

메인축 (X축)의 정렬 방향을 정한다.

---

align-items

.container {

align-items: stretch;

/* align-items: flex-start; */

/* align-items: flex-end; */

/* align-items: center; */

/* align-items: baseline; */

}

수직축(Y축)의 정렬 방향을 정한다.

justify-content  와 align-items 가 둘다 center 라면 중앙정렬 한다.

---

align-content (여러 행 정렬)

.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-wrap: wrap; 이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성입니다.

align-items 는 flex-item이 1줄인 상태에서 Y축으로 어떻게 정렬될 것 인가를 정하는 것이고 align-content 는 flex-item이 2줄 이상 되었을 때 Y축 정렬을 어떻게 할 것인가를 결정한다.

---

flex-basis

.item {

flex-basis: auto; /* 기본값 */

/* flex-basis: 0; */

/* flex-basis: 50%; */

/* flex-basis: 300px; */

/* flex-basis: 10rem; */

/* flex-basis: content; */

}

flex-basis는 Flex 아이템의 기본 크기를 설정합니다 (flex-direction이 row일 때는 너비, column일 때는 높이)

---

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-grow 는 flex-item이 flex-basis 의 값보다 커질 수 있는지를 결정하는 속성 이다.

flex-grow 에 값은 0보다 큰 값이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 원래의 크기보다 커지며 빈 공간을 메우게 된다. 기본값이 0이기 때문에, 따로 적용하기 전까지는 아이템이 늘어나지 않는다.

flex-grow에 들어가는 숫자의 의미는, 아이템들의 flex-basis를 제외한 여백 부분을 flex-grow 에 지정된 숫자의 비율로 나누어 가진다고 생각 하면 된다.

위 예제에서는 각 아이템의 컨텐츠가 “AAAAA”, “B”, “CCC”로 원래의 크기가 다르기 때문에 전체 아이템의 크기가 애매한 비율로 보이지만, 여백의 비로 생각해 보면 정확히 1:2:1 이다.

---

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

.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-shrink 는 flex-grow 와 쌍을 이루는 속성으로, 아이템이 flex-basis 의 값보다 작아질 수 있는지를 결정 한다.

flex-shrink 에 값은 0보다 큰 값이 되면 해당 아이템이 유연한(Flexible) 박스로 변하고 flex-basis 보다 작아집니다.

기본값이 1이기 때문에 따로 세팅하지 않았어도 아이템이 flex-basis보다 작아질 수 있었다.

---

flex (축약형)

.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; */

}

/* 응용 */

.item {

flex: 1 1 0;

}

.item:nth-child(2) {

flex: 2 1 0;

}

flex-grow, flex-shrink, flex-basis를 한 번에 쓸 수 있는 축약형 속성 이다.

이 세 속성들은 서로 관련이 깊기 때문에, 이 축약형을 쓰는 편이 여러모로 편리 하다.

---

align-self

.item {

align-self: auto;

/* align-self: stretch; */

/* align-self: flex-start; */

/* align-self: flex-end; */

/* align-self: center; */

/* align-self: baseline; */

}

align-items 의 flex-item 버전 입니다. align-items 가 전체 아이템의 수직축(Y축) 방향 정렬이라면, align-self 는 해당 아이템의 수직축(Y) 방향 정렬 이다.

---