TLI 5 | Thank you - "CSS flex box"

이번에는 css 의 "꽃" flexbox에 대해서 알아보자~!

왜 css의 꽃 인데?!

Flexbox는 모던 웹을 위하여 제안된 CSS3의 새로운 layout 방식이다. 요소의 사이즈가 불명확하거나 동적으로 변화할 때에도 유연한 레이아웃을 실현할 수 있다. 복잡한 레이아웃이라도 적은 코드로 보다 간단하게 표현할 수 있다.
Flexbox가 등장하기 전에는 직접 눈으로 디자인을 보면서 간격을 조절해가며 최적의 값을 찾아야했었다. 이걸 단번에 해결해주기 위해 슈퍼맨처럼 등장한 게 바로 Flexbox!

기본개념

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

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

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

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

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

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

여기서 부모태그에 display: flex를 선언해보면? 짠~~하고 정렬이 바뀐다.

Main-axis(기준축) / Cross-axis(교차축)

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

말이 길어서 복잡해 보이지만 간단하게 생각하면 flex-direction은 기본적으로 row로 적용된다. 즉 내가 따로 설정하지 않은 아이템들은 가로로 정렬 !

• 플렉스의 여러가지 방향!
  1) flex-direction: row;
  : 기본 디폴트 값으로 가로로 정렬시켜준다.(좌->우)
  2) flex-direction: row-reverse;
  : 가로 정렬 + 우->좌
  
  3) flex-direction: column;
  : 세로 정렬 + 상->하
  
  4) flex-direction: column-reverse;
  : 세로정렬 + 하->상
  

justify-content / Align-items

앞서 말한 축에 대한 개념을 밑바탕으로 하여 이후 디테일한 정렬들을 이용할 수 있는데, 크게 justify-content와 align-items로 나뉜다.
기본값인 flex-direction: row (가로정렬)를 기준으로 이야길 하겠다.

1. justify-content : 기준축의 정렬을 관리한다.
   (디폴트:아이템을 수평으로 정렬한다.)
2. align-items : 교차축의 정렬을 관리한다.
   (디폴트:아이템을 수직으로 정렬한다.)

1) space-between : 아이템들을 일정한 간격을 두고 양 끝에 배치한다.
2) space-around : 아이템들 사이에 일정한 간격을 형성해준다.
3) flex-start : (기본값) 아이템을 앞에서부터 순서대로 정렬한다.
4) flex-end : 아이템을 끝에서부터 순서대로 정렬한다.

-> 축에 대한 내용을 정리해보자 !

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

헷갈리지 않기 위해 기본값 정렬방식으로 외워두고 필요에 따라 축 정렬을 바꿔서 사용하는게 편함!
flex-direction: row [가로축 정렬]
justify-content: 가로정렬의 세부적인 정렬 지정
align-items: 세로정렬의 세부적인 정렬 내용 지정
(center, space-between!, space-around, flex-start, flex-end)

마치며..!

css flex 가 유용하다는 이유만으로 정확한 개념없이 막무가내로 레이아웃 잡기 바빴던 거 같다 이제는 flex라는 녀석에 대해서 좀 알았으니 천천히 한단계 한단계 친해지면 될 거 같다 딱 기려라 이놈아 !