CSS flex 자식 요소의 가로 크기에 영향을 주는 flex-wrap 속성

지난 시간에는 부모 요소인 컨테이너에 적용하는 flex와 inline-flex에 대해 알아보았습니다. 이번에는 자식 요소들의 가로 사이즈 형성에 영향을 주는 부모 요소의 flex-wrap 속성에 대해 자세히 알아볼 것입니다. 이 부분도 상당히 중요합니다. 웹 페이지를 구상할 때 정사이즈로 보여줘야 하는 요소가 있는 반면, 사이즈의 크기에는 상관 없이 어떻게든 보여지기만 해도 되는 요소가 있을 수 있죠. 보통 여행 사이트가 후자에 해당하고 쇼핑몰 카테고리가 정사이즈에 속할 것입니다. 이럴때 부모 요소인 컨테이너에 flex-wrap 옵션을 사용함으로서 자식 요소의 가로 크기를 정의할 수 있습니다.

 

flex-wrap: nowrap;

이 옵션은 flex 속성의 기본값입니다. 따라서 부모인 컨테이너 요소에 display: flex 또는 inline-flex가 사용되었다면 자동으로 flex-wrap: nowrap; 이 적용된 상태라고 알고 계시면 됩니다. 그러므로 이 부분은 생략합니다.

 

자식 요소의 flex 0과 1 차이

이 옵션은 부모 요소의 전체 영역을 랩으로 감싼다는 개념으로 알고 계시면 될 것 같습니다. 따라서 컨테이너 전체를 인식하게 되므로 자식 요소의 가로 사이즈가 완벽하게 유동적으로 움직이게 됩니다. 다만 여기에서도 세부적인 옵션을 통해 자식 요소의 가로 크기를 어떻게 마크업 했느냐에 따라서 매우 다이나믹하게 배치를 할 수 있습니다. 아래는 예시입니다.

 

See the Pen CSS flex-wrap by rgy0409 (@rgy0409) on CodePen.

 

부모 요소의 div에는 모두 display: flex;가 적용되어 있습니다. 첫번째의 초록색 백그라운드의 컨테이너는 가장 기본 형태죠. 자식 요소의 width 값을 100px로 고정한 상태입니다. 또한 모든 자식 요소의 세로 크기는 50px 입니다. 첫번째 컨테이너의 자식 요소에는 이 외의 다른 옵션은 아무것도 없습니다.

 

노란색 백그라운드 컨테이너의 자식 요소에는 flex 스타일이 적용되어 있음을 알 수 있습니다. 각각 이렇게 마크업 되어있지요.

 

.flex > div {
    flex: 0 300px;
}

.flex2 > div {
    flex: 1 300px;
}

첫번째인 flex: 0 300px; 의 뜻은 width: 300px;과 같습니다. 또한 부모 요소가 flex 속성인 상태에서의 자식 요소 width는 완전 고정이 아닌 max-width 상태처럼 적용됩니다. 그렇기에 최대 300px 까지 늘어나고 브라우저의 가로 사이즈를 줄이면 자식 요소도 덩달아 가로 사이즈가 알아서 줄어듭니다.

 

두번째의 flex: 1 300px;은 각 자식 요소의 가로 사이즈가 브라우저의 가로 사이즈에 맞게 각각 100% 풀사이즈로 적용됩니다. 말로는 조금 이해가 잘 안 될 수 있으니 아래의 움짤을 한번 살펴봐 주시기 바랍니다.

 

아주 flex한 반응형 만들기

우선 파란색 백그라운드의 컨테이너는 나중에 설명드리겠습니다. 지금은 노란색 백그라운드의 컨테이너에만 집중해 주세요. 보시면 아시겠지만 노란색 백그라운드의 첫번째 자식 요소는 가로 사이즈가 300px 이상 늘어나지 않습니다. 하지만 두번째 자식 요소는 다르죠. 브라우저의 가로 사이즈에 맞춰 자동으로 풀사이즈로 늘었다 줄어듭니다. 따라서 자식 요소에 flex를 어떻게 마크업 하느냐에 따라서도 이런 차이가 발생한다는것을 기억해 주시기 바랍니다. flex 0과 1의 옵션 차이로 인해 매우 다이나믹한 반응형 브라우저를 완성할 수 있습니다. 즉 이렇게 정리를 할 수 있겠습니다.

 

부모요소에 flex-wrap 옵션이 없을 때 (nowrap)

flex: 0 크기값 ▶ 각 자식요소의 가로 크기가 max-width: 100% 처럼 인식

flex: 1 크기값 ▶ 각 자식요소의 가로 크기가 width: 100% 처럼 인식

 

flex-wrap: wrap;

이제 파란색 백그라운드 컨테이너를 살펴볼 차례입니다. 해당 컨테이너의 부모 요소에는 이 스타일 옵션이 추가되어 있음을 알 수 있습니다.

 

.flex-wrap, .flex-wrap2 {
    flex-wrap: wrap;
    background-color: #8adbff;
}

그렇습니다. 바로 flex-wrap 입니다. flex-wrap에는 세 가지 옵션이 있습니다.

 

flex-wrap: nowrap; (기본값)
flex-wrap: wrap;
flex-wrap: wrap-reverse;

이렇게 세가지죠. 첫번째는 위에서도 한 번 언급했듯 부모 컨테이너 요소에 flex가 적용되어 있다면 기본값으로 적용이 되어 생략된 상태입니다. 두번째부터 직접 부모 컨테이너 요소에 마크업을 해주는 추가 옵션입니다. 세번째는 잠시 뒤 다시 설명을 드릴 것입니다.

 

flex-wrap: wrap;은 말그대로 부모 요소의 컨테이너 박스에 랩을 씌운다는 의미로 해석하시면 될 것 같습니다. wrap을 적용한 컨테이너와 그렇지 않은 컨테이너의 차이는 위의 움짤에서 살펴보시면 바로 그 차이를 이해할 수 있을 것입니다. 노란색 백그라운드 컨테이너와 파란색 백그라운드 컨테이너의 차이점, 보이시나요? 가장 큰 차이점이라고 한다면 wrap을 적용하지 않은 노란색 컨테이너의 경우에는 자식 요소가 무조건 가로 한 줄로 배치가 된다는 특징이 있습니다. 하지만 두번째 파란색 백그라운드 컨테이너의 경우는 자식 요소의 가로 사이즈가 기준이 되어 유도리있게 조절된다는것을 알 수 있습니다. 즉 무한정으로 가로 창 크기를 줄인다고 덩달아 자식 요소도 가로 크기 또한 끝까지 한없이 줄어드는게 아니라는 것입니다.

 

신나는 flex-wrap 세상

부모 요소에 flex-wrap: wrap;을 마크업 해두면 컨테이너 전체 영역을 인식하게 되는데 예를 들어 자식 요소의 가로 사이즈가 위의 예시처럼 300px이라고 한다면 브라우저의 가로 해상도에 맞춰 최대한 300px만큼 표현할 수 있는 크기로 유동성있게 변화합니다. 그래서 위의 움짤을 살펴보시면 파란색 컨테이너 부모 요소 안에 있는 자식 요소들은 브라우저 가로 크기가 300px 근처까지 오게 되면 더 이상 가로로 배치가 불가능하기에 세로로 차곡차곡 쌓이는 형태를 보이고 있습니다. 3개가 나란히 있으면 두 개는 가로로 배치가 됨과 동시에 나머지 하나는 그 밑으로 내려가 가로 전체 영역을 차지하게 되는 매우 유동적인 배치가 이루어지죠. 개인적으로 이 부분이 너무나도 마음에 들기도 하구요.

 

하지만 파란색 컨테이너에 있는 두 가지의 옵션은 각각 조금씩 다릅니다. 첫번째는 가로 300px로 완전히 고정되어 움직이고있으며 두번째는 브라우저의 가로 크기를 최대한 활용하며 유동성있게 움직이고 있습니다. CSS를 살펴보시면 각 자식요소 div에는 앞서 설명드린 flex 옵션이 적용되어 있습니다. 첫번째는 0이고 두번째는 1이죠. 위에서 flex 옵션에 대해 한 번 언급했었죠? 마찬가지의 옵션입니다. 다만 차이점은 컨테이너의 flex-wrap 옵션 뿐입니다. 정리하자면 다음과 같습니다.

 

부모 요소가 flex-wrap: wrap; 일 때

flex: 0 크기값 ▶ 각 자식요소의 가로 크기가 크기값으로 고정

flex: 1 크기값 ▶ 각 자식요소의 가로 크기가 크기값과 가깝도록 유동성있게 변함

특히 flex 1의 경우에는 정말 다이나믹한 변화가 발생하기에 컨테이너안에 항상 무언가를 꽉 꽉 채워넣고 싶을 때 사용하기 좋은 방법 중 하나입니다. 친효스킨의 메인 페이지에 적용되어있는 커버 목록도 이 방법을 사용해서 적용시킨 결과입니다.

 

flex-wrap: wrap-reverse;

이 옵션은 기본적으로 flex-wrap: wrap;과 동일합니다. 다만 차이점은 자식 요소의 배치가 역순으로 진행된다는 것입니다. 세로로 배치될때만 말이죠.

 

세로 배치만 역순으로 만들고자 할 때 wrap-reverse를 사용해보자

보시는 것처럼 기본 형태인 가로 상태의 배치는 HTML 태그 순서대로 배치됩니다. 다만 브라우저 창이 줄어들면서 세로로 쌓이면 역순으로 배치됩니다. 이 차이일 뿐입니다. 끝.