CSS : Flex 고정된 열 개수 지정하기 - flexbox, wrap, column 개수

Flex Column 열 고정 개수

CSS Flexbox 고정된 열의 개수대로 레이아웃 만들기 - wrap, column 개수

CSS Flexbox를 사용해서 열 개수를 지정하는 방법을 소개합니다.

Flex 아이템에 width만 설정해서 간단히 사용하는 방법부터, width 및 gap의 비율을 조정해서 item의 개수와 무관하게 반응형으로 레이아웃을 구성하는 방법

에 대해 작성하였습니다.

 

CSS Flex 찍먹

혹시나, Flex가 뭔지 모르는 분들을 위해 아주 짧게만 설명을 작성하였습니다. Flex가 뭔지 모르시는 분은 아래 짧은 글 정도만 보시고, 구글에 검색해서 좋은 양질의 글을 보시면 될 것 같습니다. 

Flex는?

Flexible Box, Flexbox라고 불리는 Flex는 HTML 레이아웃을 배치하기 위해 사용되는 방법 중의 하나입니다. Flex는 1차원으로 수평 또는 수직 방향으로 HTML 요소를 배치하는 데 사용됩니다. HTML에서 div는 블록 요소지만, 아래와 같은 HTML 코드에서 class="container" 인 div에 flex속성을 적용하면 아래 그림과 같이 item 클래스 div를 가로로 배치할 수 있습니다. 옵션에 따라 세로로 배치할 수 도 있습니다. 

<div class="container">
    <div class="item item_1"></div>
    <div class="item item_2"></div>
    <div class="item item_3"></div>
</div>

Flex 사용 예시

Container와 Item

위 코드와 같이 Flex를 사용하기 위해서 Container와 Item(s)가 존재합니다. 감싸는 녀석이냐(Container), 정렬을 당하는 녀석(Item) 이냐에 따라 부여 할 수 있는 다양한 CSS 속성이 존재합니다. 

아래 그림과 같은 옷장을 감싸는 프레임은 Container, 옷장 한 칸 한 칸을 Item이라고 부를 수 있습니다. 가구를 설계할 때 Container에 요구되는 사항과 Item에 요구되는 사항이 다른 것처럼, HTML 요소를 배치할 때도 마찬가지입니다. 

• 가구 프레임(Contianer) : 가구의 전체 크기, 서랍의 방향, 하단 남는 공간 처리방법 등...
• 옷장 개별 칸(Item) : 개별 아이템의 크기, 개별 손잡이 디자인, 등등...

Flex와 옷장의 유사점

이 정도의 개념만 가지고, 세부적인 CSS Flex 사용법 및 활용법은 구글에서 양질의 글을 참고하시면 이해하는데 도움이 될 것으로 생각합니다. 

 

CSS 열 개수 고정

CSS를 사용하여 열 개수를 고정하는 방법에 대해 설명합니다. 필요한 상황에 따라 참고 하실 수 있습니다.

방법1 : Item에 width 설정

당연한 말이지만, 방법1은 간단하게 item에 width값을 지정하고, container에 justify-contant: space-between을 설정하는 것입니다. 3개의 행을 하고 싶은 경우 item의 width에 30~33%의 적당한 값을 설정하면 됩니다. 

• container의 space-between 속성 값 : 텍스트 양쪽 정렬과 같은 방식
• item의 width : 25.1% ~ 33.3%의 값 입력 - px로 환산된 값도 무방함

  <div class="container">
    <div class="item item_1">Item -> width : 30% ;</div>
    <div class="item item_2">Item -> width : 30% ;</div>
    <div class="item item_3">Item -> width : 30% ;</div>
  </div>

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

.item {
  width: 30%;
}

코드 실행 결과 : 설명을 위한 예시 그림

방법2 : Container에 flex-wrap 지정

만약 위 그림과 같이 1행이 아니고, 2행 3열과 같이 다수의 행의 레이아웃을 만들어야 하는 경우 Container에 Flex-wrap을 지정하면 2행을 만들 수 있습니다. 이때, 행간 간격은 Item의 Margin으로 설정할 수 있습니다.

• 복수행 : Contianer에 Flex-wrap 속성을 설정
  • ※ Wrap은 컨텐츠의 길이가 요소의 길이보다 긴 경우 줄 바꿈을 하는 기능입니다.
• 행간 간격 : 은 Item에 Margin 속성을 사용

<div class="container">
  <div class="item item_1">I am 'Item_1'</div>
  <div class="item item_2">I am 'Item_2'</div>
  <div class="item item_3">I am 'Item_3'</div>
  <div class="item item_4">I am 'Item_4'</div>
  <div class="item item_5">I am 'Item_5'</div>
  <div class="item item_6">I am 'Item_6'</div>
</div>

.container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap; // 복수의 행
}

.item {
  width: 30%; // 3칸을 만들고 싶으면.. 26 ~ 33%로..
  margin-bottom: 10px; // 행 간격
}

Flex 복수 행 만들기

위와 같은 방법은 아이템의 수가 만들고자 하는 행의 갯수의 n배가 될 때 편하게 사용할 수 있는 방법입니다. 3열로 배치하고 싶지만, 아이템의 개수가 4개, 5개가 되는 경우에는 다른 방법을 사용할 수 있습니다. 

방법3 : width와 gap사용

Flex Container에 적용된 justify-content: space-beween 속성을 제거하고, 적절한 gap을 사용합니다. Item에 적절한 width값을 지정하여, Item의 개수와 무관하게 원하는 레이아웃 형태를 만들 수 있습니다. gap 속성 값의 세로는 px, 가로는 %로 지정하면 Flex Item 행간(세로) 간격은 균일하고, 가로는 Container의 크기에 따라 유동적으로 변하는 레이아웃을 만들 수 있습니다. 아래는 최종 코드입니다.

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

.container {
  display: flex;
  gap: 20px 2%;
  flex-wrap: wrap;
}

.item{
  width: 32%;
}

.container {
  position: relative;
  margin: 100px auto;
  padding: 40px 10px 10px 10px;
  max-width: 850px;
  background-color: rgb(0, 0, 0);
}

.item {
  height: 150px;
  line-height: 150px;
  background-color: rgb(62, 62, 62);
}

.container::before {
  content: 'I am Container';
  position: absolute;
  padding-top: 10px;
  width: 100%;
  text-align: center;
  top: 0px;
  left: 0px;
}

* {
  color: white;
  font-weight: bold;
  text-align: center;
  overflow-wrap: break-word;
}

CSS의 1~9열은 레이아웃을 위한 CSS 속성이고, 그 이하 코드는 캡처를 위해 스타일링 한 코드입니다. 결과물은 아래의 그림과 같습니다.

코드 결과

아이템의 개수가 지정된 행의 n배수가 아닐 때

한 행에서 Item의 총 width와 Container의 gap의 총합을 100%로 하면, 컨테이너에 100% 꽉 찬 비율로 만들 수 있습니다. Item에 Border(테두리) 속성이 지정되어 크기가 어긋나는 경우 item에 box-sizing: border-box; 속성을 사용하면 쉽게 반응형을 구현할 수 있습니다. 

물론, 위 결과로만 만들려면 Flex를 쓰지 않고, Inline Block 등 다양한 방법이 있습니다. 하지만 이 방법을 응용해서 변형된 Flexible Box를 구현할 수 있으니 필요에 따라 참고하세요.