오늘은 갑자기 CSS로 가게 되지만, 오늘 flex에 대해 여러번 설명 한 일이 있어서, 이참에 블로그에 자세하게 정리해 두려고 한다.

flex란?

flex의 특징

몇번째 전의 포스팅에서 inline-block에 대하여 다룬적이 있다. 그때 마지막에, inline-block이 여러가지 불편한 점이 있었고, flex의 등장으로 잘 사용 되지 않는다 하고 끝을 맺었다.

flex가 얼마나 유용한 속성이기에 기존에 있던 속성을 밀어냈을까?

flex의 가장 큰 특징은, 하나 혹은 여러개의 아이템을 비율에 따라서 정렬 할 수 있다는것이 가장 큰 장점으로 꼽힌다고 생각한다.

대략적으로 레이아웃을 만들때, 보다 간편하고 쉽게,보다 유연하게(flex) 배치 할 수 있는것은 큰 장점일것이다.

flex는 어떻게 사용하는가?

흔히 flex를 처음 접하는 사람들이 실수 하는 부분이,
움직이고 싶은 아이템에 flex를 부여하는 것이다.

하지만 flex를 사용하려면, 움직이고 싶은 아이템에 직접 flex를 부여해서는 안된다.
직접 flex를 부여하게 되면, 아마 해당 아이템은 움직이지 않을것이다.

flex는 움직이고 싶은 아이템의 부모 아이템에 부여하게 된다.
즉, flex를 입력하면, 컴퓨터에게 "지금부터, 이 box안에 있는 아이템들은 flex로 관리하겠다" 라고 전달하는 것이다.

그 이후에, flex를 사용하고 있을때 쓸 수 있는 옵션들로 해당 자식 아이템들의 배치를 관리하게 된다.

flex의 옵션들

flex의 옵션중 자주 사용 되는 것을 꼽으라면 아무래도,
justify-content와 align-items일것이다.

이 두 옵션을 조합하여 자식 아이템을 중앙정렬 시키거나, 보다 유연하게 배치하는것이 가능하다.

justify-content와 align-items 그리고, axis

justify-content와 align-items

justify-content와 align-items를 이해하려면 우선 flex를 사용 할 때 적용 되는 두개의 축을 이해해야 한다.

우리가 flex를 선언할때, 해당 아이템에는 두개의 축이 적용 되게 된다.

바로 main axis와 cross axis이다.

약 한달전, 동일한 주제를 다룰때

이러한 그림을 사용 했었다.

main axis는 default값으로 row를 가지고 있다.
때문에, flex를 처음 선언하면 아이템들이 row에 따라 나열 되는것이다.

아이템들은 기본적으로 main axis에 따라 움직이기에, 이런 현상이 나타나는것이다.

main axis에서 아이템들을 정렬 시키고 싶을때 사용하는 옵션이 바로 justify-content이다.
justify-content는 main-axis를 따라서 아이템 사이에 동일한 간격을 두고 아이템을 배치하거나, 중앙으로 모으는 등의 옵션이 가능하다.

다음은 justify-content에서 사용 할 수 있는 옵션을 그림으로 나타낸 것이다.

한가지 옵션이 빠져 있는데, space-around와 비슷하지만 양쪽 끝과 아이템 사이의 간격을 완벽하게 동일하게 만드는 space-evenly가 그것이다.

이 옵션들중 space가 붙지 않는 옵션은 align-items와 공유하는 옵션들이다.

바꿔 말하면, space가 붙는 옵션은 오직 justify-content에서만 사용 할 수 있는것이다.

justify-content가 main axis에 따라 움직인다면, align-items는 cross axis에 따라 움직이게 하는 옵션이다.

상술했듯, align-items는 flex-start, flex-end, center의 옵션만을 사용 할 수 있다.

flex-direction

앞서, main axis의 default는 row라고 작성하였다.
이 main axis의 방향은 바꿀 수 있는데, 이 옵션이 flex-direction이다.
flex-direction은 main axis의 방향에 간섭한다.
main axis의 방향을 row에서 column으로 바꿀 수 있는것이다.

또한, flex-direction은 row 혹은 column에서 아이템을 반대로 나열 시킬 수 있는데, reverse를 붙인 row-reverse와 column-reverse가 그것이다.

이렇게 main axis를 바꾸게 되면, flex에도 변화가 일어난다.
main axis가 row에서 column으로 바뀌었기에, justify-content가 가로축으로 작용하지 않는것이다.

당연히도, justify-content는 가로축이 아니라 main axis에 따라 움직이므로, flex-direction이 column으로 바뀌면 justify-content는 column에 따라 움직이고, align-items는 row에 따라 움직이게 된다.

이러한 특성을 잘 파악한다면 레이아웃을 짤때 많은 도움이 될것이다.

flex : ??;

flex에 직접 값을 할당하는것도 가능하다.
이전 포스팅에선 위의 내용만 하고 종료했으나, 이번엔 하나 더 추가하여, 이 옵션에 대해 다루기로 한다.

.container {
  display: flex;
  flex: 1;
}

위와 같이 flex에 값을 할당하게 되면, 길이를 분수로 나누어, 처리하게 된다.

예를 들어, 총 길이가 10이라고 할때, 위의 container가 차지하는 크기는 1이 되는것이다.

만약 다른 아이템의 flex값이 2라면, 길이를 3으로 나누어, container가 1의 길이를 가져가고, 다른 아이템이 2의 길이를 차지 할 것이다.

간단하게나마 새로운 속성에 대해서도 다루어 보았다.
flex는 자주 사용 되는 속성이니만큼 숙지하고, 여러번 연습하면서 손에 익히는것이 중요할것이다.

MDN에서 검색하는것을 생활화 하고, 익숙해지기 위하여 다음의 게임을 한번 해보도록 하자.