CSS 속성

Flexbox

---

Flexbox 는 기존 CSS 레이아웃 사용의 불편한 부분을 개선하기 위해 등장했습니다. Flexbox 는 크게 컨테이너와 아이템으로 구성됩니다.

출처

div {
    display: flex;
    flex-direction: row | column | row-reverse | column-reverse;
    align-items: stretch | flex-start | center | flex-end | baseline;
    justify-content: flex-start | center | flex-end | space-betwenn | space-around;
}

flex-direction

• row
  기본값. 아이템을 행(row)을 따라 가로 순서대로 왼쪽부터 배치한다.
• column
  아이템을 열(column)을 따라 세로 순서대로 위쪽부터 배치한다.
• row-reverse
  아이템을 행(row)의 역방향으로 오른쪽부터 배치한다.
• column-reverse
  아이템을 열(column)의 역방향으로 아래쪽부터 배치한다.

flex-direction으로 지정된 방향으로 향하는 축을 main axis, main axis를 가로지르는 방향으로 향하는 축을 cross axis 라고 부릅니다. 이 main axis와 cross axis 의 방향에 따라서 다음에 나올 align-items와 justify-content 속성의 값의 의미가 달라지게 됩니다.

align-items

컨테이너 내에서 아이템을 어떻게 정렬할 것인지를 결정합니다. 이 때 정렬은 cross axis 을 기준으로 합니다.

• stretch
  기본값. 아이템을 늘려서(stretch) 컨테이너를 가득 채운다.

• flex-start
  cross axis의 시작 지점으로 아이템을 정렬한다.

• center
  cross axis의 중앙으로 아이템을 정렬한다.

• flex-end
  cross axis의 끝 지점으로 아이템을 정렬한다.

• baseline
  아이템을 baseline 기준으로 정렬한다.

justify-content

컨테이너 내에서 아이템들을 어떻게 나란히 맞출 것인지를 결정합니다. 이 때 맞추는 기준은 main axis 를 기준으로 합니다.

• flex-start
  main axis의 시작 지점으로 아이템을 맞춥니다.

• center
  main axis의 중앙으로 아이템을 맞춥니다.

• flex-end
  main axis의 끝 지점으로 아이템을 맞춥니다.

• space-betwenn
  main axis를 기준으로 첫 아이템은 시작 지점에 맞추고, 마지막 아이템은 끝 지점에 맞추며, 중간에 있는 아이템들 사이(betwenn)의 간격(space)이 일정하게 되도록 맞춥니다.

• space-around
  main axis를 기준으로 각 아이템의 주변(around) 간격(space)을 동일하게 맞춥니다.

참고 문서 - w3schools : CSS Flexbox