TIL | CSS3 - Flex 속성에 관하여

Flex란?

-> Flex는 요소의 크기가 불분명하거나 동적인 경우에도, 각 요소를 정렬할 수 있는 효율적인 방법을 제공합니다.

우선 Flex는 2개의 개념으로 나뉘어진다.
첫 번째는 Container 두 번째는 Items 이다.
위에서 살펴본 바와 같이 Container는 Items를 감싸는 부모 요소이며, 각 Item을 정렬하기 위해선 Container가 필수적이다.

주의할 부분은 Container와 Items에 적용하는 속성이 구분되어 있다는 것이며,
Container에는 display, flex-flow, justify-content 등의 속성을 사용할 수 있으며,
Items에는 order, flex, align-self 등의 속성을 사용할 수 있다.

Flexbox 기본 개념

Flexbox를 설명하는 가장 기본적인 개념은Flex-container(부모) / Flex-item(자식)에서부터 시작한다.

Flexbox의 중요한 특징은 아이템 각각에다가 명령을 하는 것이 아니라, 부모한테 명령하는 것이다. “아빠! 애들을 좀 떨어트려놔줘” 하고. flex-container(부모)에게 display:flex를 선언하게 되면 flex-items은 즉각적으로 영향을 받고 실행된다.

하지만 여기서 유의해야할 건, flex-container와 flex-items가 직접적으로 종속관계에 있어야지 Flex모드가 제대로 적용된다. 초보 단계에서 가장 많이 하는 실수중에 하나가 바로 이 부분.

예시를 보며 구체적으로 알아보자. 다음과 같이 박스 세개를 만들어봤다.
기본적으로는 블럭 형식으로 디스플레이가 되었다.

[HTML]

<div class="father">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

[CSS]

.box {
       width: 50px;
       height: 50px;
       background-color: palevioletred;
       border: 1px solid white;
     }

여기서 부모태그에 display: flex를 선언해보면

 .father {
        display: flex;
      }

위와 같이 display : flex; 속성이 적용되어 박스의 배열이 바뀌게 된다.

Flow-direction (Axis에 따라 다른 레이아웃)

-> Flow direction에 따른 Axis(축)

• 어떤 축을 기준으로 정렬할지 설정하느냐에 따라 정렬이 달라지게 되는데,
  이를 flex-direction의 값은 row(가로정렬)와 column(세로정렬)을 기준을 둔다. 방향을 설정하지 않으면 기본값으로 row가 기준축, column은 세로축으로 적용된다. 하지만 flex-direction의 옵션을 column으로 변경하면 main-axis와 cross-axis는 서로 바뀌게 되어 세로축이 기준축, 가로축이 교차축이 된다.
  위의 예시는 축 방향을 설정하지 않았기 때문에 기본값 row(가로정렬)가 기준축으로 적용되어 row(가로)로 박스들이 정렬되었다.

• 복잡한 개념같지만 간단하게 생각하면 flex-direction은 기본적으로 row이다.
  즉, flex-direction 따로 값을 설정하지 않으면 flex 속성은 기본적으로 가로로 정렬이 된다.

-> Flow-direction의 속성 : Reverse

1) flex-direction: row-reverse
기준축이 가로 정렬, 교차축이 세로정렬이되 아이템의 정렬순서가 뒤바뀐다.
flex-start와 flex-end의 방향도 반대로 돌려진다.
2) flex-direction: column-reverse
기준축이 세로 정렬, 교차축이 가로정렬이되 아이템의 정렬 순서가 뒤바뀐다.
마찬가지로 flex-start와 flex-end의 방향도 반대로 돌려진다.

  .father {
        display: flex;
        flex-direction: row-reverse;
        justify-content: flex-start;
      }

위처럼, 아이템들의 정렬 순서가 바뀌었고 flex-start 역시 끝에서부터 정렬되는 형태가 된 것을 알 수 있다.

justify-content / Align-items

앞서 말한 축에 대한 개념을 기반으로 디테일한 정렬들을 이용할 수 있는데, 크게 justify-content와 align-items로 나뉜다.
기본값인 flex-direction: row (가로정렬)를 기준으로 예시를 들면,

• justify-content : 기준축의 정렬을 관리한다.
  (디폴트:아이템을 수평으로 정렬한다.)

• align-items : 교차축의 정렬을 관리한다.
  (디폴트:아이템을 수직으로 정렬한다.)

• space-between : 아이템들을 일정한 간격을 두고 양 끝에 배치한다.

• space-around : 아이템들 사이에 일정한 간격을 형성해준다.

• flex-start : (기본값) 아이템을 앞에서부터 순서대로 정렬한다.

• flex-end : 아이템을 끝에서부터 순서대로 정렬한다.

Flexbox에서 가장 많이 사용되는 정렬 중에 하나는 바로 요소들을 일정한 간격을 두고 양 끝에 배치하는 방식이다.
justify-content : space-between 을 이용하여 정렬하는데 결과는 다음과 같이 나온다.

flex-direction = column으로 변경한 후 justify-content = space-between을 적용하면 어떻게 될까?
아래사진을 보면 알 수 있겠지만, 축 방향은 변경되어 세로정렬 되었지만 양 끝으로 배치되지 않았다. 그 이유가 중요한데, 정렬이 될 만큼 충분한 사이즈의 세로값이 입력되어 있지 않기 때문이다.

flex를 선언한 부모태그에 세로값 height= 50vh을 적용하면 justify-content = space-between 정렬이 제대로 적용되었다. (세로 축의 크기가 늘어나서 정상적인 적용이 가능해짐.)

총 정리

• flexbox는 기준축을 중심으로 아이템을 정렬하는 방식이다.
• 기준축(row/column)에 따라, justify-content와 align-items의 정렬방식이 결정된다.
• 정렬을 할 수 있는 충분한 가로값(width), 세로값(height)을 flex-container(부모태그)에 줘야만 정렬이 정상적으로 작동한다.