📌 Contents

1. flexbox란
2. flex container 속성 활용하기
3. flex item 속성 활용하기
4. flex-wrap & align-content

flexbox란?

flexbox를 이용하면 요소를 쉽게 정렬할 수 있다. 사용 가능한 공간을 최대한 활용할 수 있도록 컨테이너에 요소를 확장하고 축소할 수 있는 기능을 제공한다. 또한 더 적은 코드와 읽기 쉬운 방법으로 float 레이아웃을 대체한다.

flexbox를 만드려면 부모 요소에 display: flex 속성을 지정한다. 이 속성이 적용된 요소는 flex container가 되고, 자식 요소는 flex item이다. flex item들이 배치되는 방향을 main axis, 수직 축을 cross axis라고한다.

flexbox 속성

flexbox 속성은 container에서 사용하는 속성과 item에서 사용하는 속성으로 나뉜다.

• flex-wrap은 flex container에 충분한 공간이 없는 경우 flex item의 줄바꿈 여부를 정의한다.
• justify-content는 flex item이 main axis를 따라 정렬되는 방식을, align-items는 cross axis를 따라 정렬되는 방식을 정의한다.
• align-content는 행이 1개보다 많은 경우에 적용된다. 빈 공간이 있는 경우 cross axis를 따라 행을 정렬하는 방법을 다룬다.

이제 예시를 통해 자주 사용하지 않았던 속성, 헷갈리는 속성 등을 정리해 보자.

flex container 속성 활용하기

flex-direction

flex-direction 은 row, column 외에도 row-reverse, column-reverse 값을 사용할 수 있다. main axis 방향을 반대로 바꾼다.

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

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

justify-content

justify-content 에서는 특히 헷갈릴 수 있는 space-between, space-around, space-evenly 차이점을 알아보자.

space-between

.container {
  display: flex;
  justify-content: space-between;
}

space-between 을 사용하면 flex item 사이에 공간이 고르게 나뉜다.

space-around

.container {
  display: flex;
  justify-content: space-around;
}

space-around 는 각 flex item의 왼쪽과 오른쪽 모두에 같은 크기의 공간을 둔다.

space-evenly

.container {
  display: flex;
  justify-content: space-evenly;
}

space-evenly 는 space-around 와 비슷하지만 요소의 측면과 item 사이 공간이 모두 같다는 차이점이 있다.

align-items

align-items 에서는 center, flex-start, flex-end, stretch 를 특히 자주 사용하는데, baseline 이라는 속성 값도 있다. 텍스트 기준선인 baseline을 기준으로 item을 정렬해 준다.

<div class="container">
  <div class="item">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>

.container {
  display: flex;
  justify-content: center;
  align-items: baseline;}
.item2 {
  font-size: 100px;
}

예를 들어 item2의 폰트 사이즈를 크게 변경하면 아래와 같이 정렬된다.

flex item 속성 활용하기

align-self

align-self 는 align-items 값을 재정의한다. grid에서는 grid area 항목을 정렬하고, flexbox에서는 cross axis 항목을 정렬한다.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.item2 {
  font-size: 100px;
}
.item3 {
  align-self: flex-end;}

order

order의 초기값은 0이다. 만약 요소 하나를 시작 부분으로 옮기려면 0보다 작은 값을 주면 된다. 반대로 0보다 큰 값을 준다면 마지막으로 이동한다. 예를 들어 아래처럼 세 번째 아이템에 -1을 주면 맨 앞으로 오게 된다.

.item3 {
  order: -1;
}

flex-grow

flex-grow 속성은 flex item의 확장과 관련된 속성이다. 예를 들어 모든 item에 1이상의 값을 부여하면 아이템 각각이 가능한 전체 공간을 차지하게 된다.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.item {
  flex-grow: 1;  margin: 10px;
}
.item2 {
  font-size: 100px;
}

flex-shrink

flex-shrink 속성은 flex item의 축소와 관련된 속성이다. 기본값은 1이고, 공간이 더 이상 없다면 요소가 축소될 수 있게 한다. 만약 값이 0이면 item의 크기가 줄어들지 않고 유지된다.

flex-basis

flex-basis 속성은 flex item의 기본 크기를 결정한다. 기본값은 auto 이다. item 각각에 width 를 지정하는 대신, flex-basis 를 이용하여 너비를 설정할 수 있다.

flex: 1 이란?

flex-grow, flex-shrink, flex-basis 속성은 축약하여 표현할 수 있다. 예를 들어 flex: 1 1 0 은 아래와 같고, 이를 다시 flex: 1 로 표현할 수 있다.

.item {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  /* flex: 1 */
}

flex-wrap & align-content

flex-wrap 은 item이 flex container를 벗어났을 때 줄을 바꿔주는 역할을 해서 반응형을 구현할 때 유용하다. 예를 들어, 아래와 같이 컨테이너에 flex-wrap: wrap, 6번째 아이템에 flex: 1을 준다면, 뷰포트에 따라 아이템이 아래로 흐르는 것을 볼 수 있다.

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div class="item6">6</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;}
.item6 {
  flex: 1;
}

그런데 행이 2개로 늘어나면서 두 행 사이에 불필요한 공간이 생겼다. 이때 align-content 를 사용하면 쉽게 행을 정렬할 수 있다.

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  align-content: center;}

이제 의도한 대로 공간없이 중앙에 배치된것을 볼수 있다. 물론 flex-start, flex-end, space-between 등을 이용하여 원하는 위치에 두 행을 정렬할 수도 있다.