CSS Flex

사이트의 레이아웃을 구성할 때, 사용하는 css 레이아웃 기법으로, 쉽게 수직, 수평 레이아웃 구조를 만들 수 있다.
또한 웹브라우저의 크기에 따라 반응형 레이아웃을 만드는데 효과적으로 사용할 수 있습니다.
최근에는 흔히 사용하는 기법으로, 예를 들어 material-ul의 react의 템플릿을 보면은 이제 flex 기법을 이용한 구조를 쉽게 볼 수 있을 것이다.

구조

flex 의 구조는 flex-container (display: flex 가 설정된 div) 안에 flex-item 들이 들어가는 구조 입니다.
해당 구조가 갖춰져야 안에 items 를 정렬시킬 수 있습니다.

<div style="display: flex">
  <div class="flex-items"></div>
  <div class="flex-items"></div>
  <div class="flex-items"></div>
</div>

flex, inline-flex

display: flex, display: inline-flex 를 사용하면, flex container 를 정의 할 수 있습니다.
간단하게 flex 는 block 형태의 container, inline-flex 는 inline 형태의 container 라고 볼 수 있습니다. (내부가 아님.)
이제 display: flex 를 걸면, 그 안에 item 들의 너비와 높이를 설정하지 않으면, width 는 자신의 width, 높이는 container 의 높이를 따라가는 것을 볼 수 있습니다.

flex 에서 사용하는 몇가지 속성

flex 를 사용하면서, 흔히들 사용하는 몇가지 속성에 대해 설명합니다. 여기서는 이런게 있다 라고만 생각하고, 직접 사용시에는 MDN 같은 docs 를 확인하는 것이 베스트 초이스입니다.
종류에는 flex-direction, flex-grow, flex-wrap, flex-shrink 등등 있지만, 필자는 자주 사용했던, direction, grow 2개만 간단하게 설명하겠습니다.

flex-direction: 아이템을 배치할 때 가로(열)배치를 할지, 세로(행)배치를 할지 정하는 속성입니다.

1. flex-direction: row; // 가로 방향으로 작성
2. flex-direction: row-reverse; // 가로의 역방향으로 작성
3. flex-direction: column; // 세로 방향으로 작성
4. flex-direction: column-reverse; // 세로 역방향으로 작성

flex-grow: 아이템을 배치할 때 할당 공간을 정의합니다.

.flexBox {
  display: flex;
  border: 1px solid black;
  width: 500px;
  height: 150px;
}

.flex-items1 {
  flex-grow:1;
  border: 1px solid black;
}
.flex-items2 {
  flex-grow:2;
  border: 1px solid black;
}
.flex-items3 {
  flex-grow:3;
  border: 1px solid black;
}

  <div class="flexBox">
    <div class="flex-items1">flex-item</div>
    <div class="flex-items2">flex-item</div>
    <div class="flex-items3">flex-item</div>
  </div>

비고

flex 인 화면에서 라이브러리를 사용시에 높이에 대한 조절이 잘 안된다는 이슈를 몇 번 받은 적이 있는데, 대부분 높이에 관련된
문제였다. 높이가 지정되지 않은 아이템의 높이들이 컨테이너의 높이에 따라가는 것을 알지 못하여, 컨테이너의 높이를 지정하지 않고 라이브러리의 높이 크기에 따라 점점 커지는 로직이 있었는데, 그 부분에서 높이가 무한하게 커지는 이슈를 확인할 수 있었다.
해당 이슈로 인해, flex 에 대한 공부를 하였고, 반응형 샘플을 만들어 전달하여 해결하였고, 간단하게 공부 했던 내용에 대해 정리하여 올린다.