Flexbox

개념

Flexbox는 container에 적용되는 속성값과 item에 적용되는 속성값이 각각 존재한다.

Flexbox에는 중심축(main axis)과 반대축(cross axis)이 있다.

---

container

---

• display
  → Flexbox로 만들기 위해 필요하다.

display: flex;

---

• flex-direction

flex-direction: row;
→ 기본값으로 왼쪽에서 오른쪽으로 진행된다.

flex-direction: row-reverse;
→ 오른쪽에서 왼쪽으로 진행된다.

flex-direction: column;
→ 수직으로 진행된다.

flex-direction: column-reverse;
→ 아래에서 위로 진행된다.

---

• flex-wrap

flex-wrap: nowrap;
→ 기본값으로 창 크기가 작아져도 아이템들이 한 줄에 모여있다.

flex-wrap: wrap;
→ 아이템들이 한 줄에 꽉차게 되면 자동적으로 다음 라인으로 넘어가게 된다.

flex-wrap: wrap-reverse;
→ 반대로 아래부터 위로 진행된다.

---

• flex-flow
  → flex-flow을 이용해서 한번에 묶어서 작성할 수 있다.

ex) flex-flow: column nowrap;

---

• justify-content
  → 중심축에서 아이템을 어떻게 정렬하는지 결정한다.

justify-content: flex-start;
→ 기본값으로 수평이 중심축이면 왼쪽에서 오른쪽으로, 수직이 중심축이면 위에서 아래로 진행된다.

justify-content: flex-end;
→ 아이템들의 순서는 유지하되 reverse처럼 container는 반대방향부터 진행된다.

justify-content: center;
→ 아이템들이 가운데 정렬이 된다.

justify-content: space-around; → 맨 끝의 아이템 간격은 아이템 하나의 공간, 아이템과 아이템간의 간격은 두개의 아이템 각각이 가지고 있는 공간이 합쳐진 간격이기 때문에 맨 끝의 아이템 간격과 아이템과 아이템간의 간격 사이가 다르다.

justify-content: space-evenly;
→ 아이템의 간격이 전부 똑같다.

justify-content: space-between;
→ 아이템 맨 끝의 간격은 화면에 맞게 배치하고 나머지 간격은 똑같이 유지한다.

---

• align-items
  → 반대축에서 아이템을 어떻게 정렬하는지 결정한다.

align-items: center;
→ 반대축 기준으로 가운데 정렬한다.

align-items: baseline;
→ 텍스트의 위치를 균등하게 만든다.

---

• align-content

align-content: space-between
→ 위와 아래에는 아이템들이 딱 붙어있지만 가운데는 균등하게 떨어져 있다.

align-content: center
→ 가운데로 정렬이 된다.

---

item

---

• order
  → 아이템의 순서를 정할 수 있다.

---

• flex-grow
  → 설정한 값에 맞게 아이템들이 창 크기에 꽉 차게 변경된다.

---

• flex-shrink
  → 컨테이너가 줄어들 때 설정한 값에 맞춰서 아이템의 크기가 변경된다.

---

• flex-basis
  → 컨테이너의 크기에 맞게 설정한 %에 맞게 아이템의 크기가 변경된다.

---

• align-self
  → 아이템 전체가 아닌 각각의 아이템 별로 정렬을 할 수 있다.

---

출처: 드림코딩 - CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지!