Display Flex

사이트

[컨테이너]

@container

Flex의 영향을 받는 전체 공간
노란색 배경의 컨테이너

.container {
  display: flex;
}

배치 방향 flex-direction

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

---

여러줄 처리 flex-wrap

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

---

메인축 방향 정렬 flex-wrap

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

1. flex-start (기본값)

아이템들을 시작점을 기준으로 정렬

2. flex-end

아이템들을 끝점을 기준으로 정렬

3. center

아이템들을 가운데로 정렬

4. space-between

아이템들을 균일한 간격으로 정렬

5. space-around

아이템들의 주위를 균일한 간격으로 정렬

space-evenly

아이템들의 사이와 양끝에 균일한 간격을 만들어 정렬 (IE와 Edge에서는 지원X)

---

수직축 방향 정렬 align-items

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

---

Flex Item 속성

기본 크기 설정 flex-basis

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

- width와 flex-basis의 차이

- flex-basis: 100px 미만일 경우 100px로 늘어나고, 100px 이상일 경우에는 width가 유지됨

.item {
  flex-basis: 100px;
}

- width: 100px로 고정

.item2 {
  width: 100px;
}

---

유연하게 늘리기 flex-grow

남은 빈 공간을 메우며 늘어남

---

유연하게 줄이기 flex-shrink

flex-basis보다 작아질 수 있는지를 결정함

.item {
  flex-shrink: 0;
  flex-shrink: 1;
}

---

수직축 정렬 align-self

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

---

배치순서 order

아이템 순서 결정 (시각적으로 변경, HTML 구조는 변하지 않음)

#item1 {
  order: 3;
}
#item2 {
  order: 1;
}
#item3 {
  order: 2;
}