Flexbox 기본 다지기 2 :: 마이구미

아주 오래전에 Flexbox 에 대한 아주 기본적인 내용을 다뤘다.

이번 글은 크게 flex-wrap 과 flex(flex-grow, flex-shrink, flex-basis) 속성 사용법을 알아본다.

Flexbox 에 있어서는, 가장 중요한 핵심인 주축과 교차축의 이해가 필요하기 때문에, 아래 글을 먼저 참고하면 좋다.

flex-direction 의 값을 사용한다면, 주축과 교차축을 바뀐다는 것을 인지하고 있어야한다.

또한, flexBox 를 다룰 때에는 관련된 속성들의 디폴트 값을 이해할 필요가 있다.

Flexbox 기본 1 - https://mygumi.tistory.com/237

이미지리스트에 대한 예제를 단계별로 진행하면서 Flexbox 의 활용하는 방법을 다뤄본다.

우선 첫번째 예제를 작성해본다.

1. flex 속성을 가지는 컨테이너가 존재하고, 너비는 70% 이다.
2. 컨테이너 안에는 이미지 4개를 배치한다.
3. 각 이미지는 컨테이너의 너비의 30%의 너비를 갖는다.

<div class="container">
  <img/>
  <img/>
  <img/>
  <img/>
</div>

.container {
  display: flex;
  width: 70%;
  img {
    width: 30%;
    height: 100%;
  }
}

위와 같은 코드 형태가 작성될 것이다.

실제 코드는 다음과 같다.

See the Pen 1. need flex-wrap by leejunghyun (@mygumi) on CodePen.

보다시피, 컨테이너의 너비(70%)보다 이미지 전체의 너비(30% * 4)가 크기 때문에, 범위를 벗어나는 모습을 볼 수 있다.

만약 컨테이너의 속성이 flex 가 아니였다면, 세 개의 이미지가 동일한 줄에 배치되고, 나머지 하나의 이미지는 벗어나지 않고, 다음 줄로 내려가서 배치되었을 것이다.

우리가 원하는 것은 컨테이너 영역인 흰색에만 배치되길 원한다.

이 경우, flex-wrap 속성을 사용하여 해결할 수 있다.

flex-wrap 속성은 자신에게 속한 flex-item 요소들을 가능한 영역 내에 배치할 수 있게 여러 행으로 나누어줄 수 있다.

이 속성의 디폴트 값이 "nowrap" 이라서 강제로 한줄에 배치되어, 위처럼 영역을 벗어나는 결과를 내게 된다.

.container {
  display: flex;
  flex-wrap: wrap;
}

flex-wrap: wrap 를 추가한 결과, 다음 행에 배치된 모습을 볼 수 있다.

그리고 조금 더 나아가, 같은 컨테이너를 더 만들어보자.

결과적으로는 다음과 같다.

1. flex 속성을 가지는 컨테이너가 존재하고, 너비는 70% 이다.
2. 컨테이너 안에는 이미지 n개를 배치한다.
3. 각 이미지는 컨테이너의 너비의 30%의 너비를 갖는다.
4. 이미지 갯수를 n = n - 1 해서 1번으로 돌아가서 컨테이너를 만든다.

총 컨테이너는 4개가 존재하고, 각 컨테이너에는 이미지 갯수가 4, 3, 2, 1 개를 가지고 있다.

flex-wrap 속성과 컨테이너를 늘린 예제는 다음과 같다.

See the Pen 2. apply flex-wrap, need flex: 1 by leejunghyun (@mygumi) on CodePen.

위 코드로 나타내는 결과물은 아쉬운 부분들이 많이 존재한다.

좌우 여백이 일정하지 않고, 각 행의 공백또한 일정하지 않다.

이 문제는 flex-grow 속성을 통해 해결 가능하다.

flex-grow 속성은 flex-item 요소가 내부에 할당 가능한 공간의 정도를 지정한다.

동일한 값을 가진다면, 동일한 공간을 가지게 된다.

그로인해, 각 빈 공간들은 채워지게되고, 한개의 이미지만 같은 행에서도 공간을 채우기 위해 너

초기값은 0으로써, 위와 같은 상황에서는 0이 아닌, 어떤 양수를 넣든 우리가 원하는 결과를 낼 수 있다.

flex-grow: 1;

flex-grow 는 flex-shrink 와 flex-basis 과 함께 사용된다.

flex-shrink 는 flex-item 의 너비가 컨테이너보다 클 경우를 위해 축소해주고, flex-basis 는 기본 크기(width, height) 를 지정한다. 

* 크기의 종류는 flex-direction 에 따라 달라진다.

대부분 위 3개의 속성을 선언했음을 보장하기 위해 축약형인 flex 속성을 사용한다.

flex: 1 1 0; // flex-grow: 1, flex-shrink: 1, flex-basis: 0

자세한 건 MDN 문서를 참고하길 바란다. (https://developer.mozilla.org/ko/docs/Web/CSS/flex-grow)

최종적인 코드와 결과물은 다음과 같다.

See the Pen 3. apply flex: 1 by leejunghyun (@mygumi) on CodePen.