본 글은 (나)가 참고하기 위해 작성한 글입니다.
공부하는 과정에서 느낀 부분을 에세이처럼 정리하(려 하)고 있습니다.
하여, 제 글은 매우 주관적입니다😁
목차는 오른쪽을 참고해주세요👉👉

나이를 2N이나 먹고 오름차순, 내림차순을 여전히 헷갈려 한다. 그래서 그냥 정렬할 때 desc해보고 내가 원하는 방향이 아니다 싶으면 asc를 하는...

근데 css계의 오름/내림차순이 될 것 같은 아이를 발견했다. flexbox의 align-items(align-content)와 justify-content 프로퍼티.

플렉스박스 친해지기

일단, 플렉스박스(flexbox; 이하 플박) 왜 쓸까?

css에서 레이아웃 작업을 할 때 플박과 그리드(grid) 를 활용할 수 있다. 개인적으로 그리드로 배치할 수 있는 부분은 그리드를 사용하는 걸 선호한다. 플박을 활용해도 여러 줄의 요소 배치는 가능하다. 그러나 애초에 그리드를 통해 너무도 쉽게 2차원 레이아웃 작업을 할 수 있기 때문에 굳이 플박을 사용하진 않는다. 전체적인 요소들의 레이아웃을 그리드로 배치한 다음, 그리드 내 플박 프로퍼티를 통해 요소들의 정렬 정도만 조정한다.

display: inline-block; 등으로 설정해 둔 곳은 플박으로 변경하기 좋은 요소이다. 블록 요소를 인라인으로 변경한 건 어찌됐든 배치를 변경하려고 한 거잖아? 그런 것들을 플박으로 처리할 수 있는 것. vertical-align같은 정렬을 위한 프로퍼티를 설정해둔 곳도 마찬가지이다.

justify-content와 align-items

두 요소는 flex-container(부모 요소)에 설정할 수 있는 프로퍼티이다. 플박은 flex-container(부모 요소)와 flex-items(자식 요소)에 각각 적용할 수 있는 프로퍼티가 다르다.

부모 요소는 뭐고, 자식 요소는 또 뭔가?

내가 배치하고자 하는 아이들을 감싼 요소가 부모 요소가 된다. 이 부모 요소의 display프로퍼티를 flex로 설정하게 되면 "나 이제 플박 쓸거야!"라고 알려주는 것이다. 그 요소가 감싸고 있는 다른 자식 요소들은 자연스럽게 flex-items가 된다.

justify-와 align-, 이 두 아이들을 이해하기 위해서는 기본축과 교차축의 개념을 이해해야 하는데 이 두 가지 축 개념을 이미지로 접한 것이 플박에서 제일 헷갈렸던 부분이었다.

두 개의 축: 기본축, 교차축

이 두 축은 시작점이 같다는 것을 염두하고 시작을 해보자. 축의 방향을 결정하는 flex-direction 프로퍼티가 있다. 아무것도 설정하지 않았을 때는 row를 기본값으로 가진다. 이 경우에 기본축은 우리가 글자를 읽어가는 방향, 즉 왼쪽 위에서 오른쪽 위를 향한다고 생각하면 된다. 교차축은 같은 시작점을 공유하기 때문에 왼쪽 위에서 왼쪽 아래를 향하게 된다. 만약 flex-direction이 column이라면 기본축이 왼쪽 위에서 왼쪽 하단, 즉 아래 방향으로 변경되고 교차축이 왼쪽 위에서 오른쪽 위로 가는, 즉 row 때와 반대가 되는 것이다.

사실 여기까지만 해도 괜찮았다.
이제 justify-와 align-을 보도록 하자.

이론적으로는 justify-content는 기본축을, align-items는 교차축을 따른다고 한다. 문장으로만 보면 사실 이해가 되지 않는다. 그래서 🔽예시🔽를 만들어봤다.(각 아이템에 너비와 높이를 설정)

[case1] flex-direction: row;

아래는 flex-direction가 row일 때, justify-content와 align-items를 각각 center로 설정했을 경우를 보여주고 있다.

🔼 justify-content의 경우는 미묘하지만 양쪽에 여백이 동일하다.

(참고) align에는 -items와 -content가 있다. 전자의 경우는 flex-items가 줄바꿈 없이 한 줄에 있을 때 사용하고 -content는 flex-items들이 2줄 이상이고 여백이 있을 경우에 사용한다. (개인적으로 아이템이 여러 줄이 되면 그리드를 활용한다.)

앞에서 말했다시피 align-은 교차축을 따르는 프로퍼티이고 기본값은 stretch이다. 지금은 높이와 너비를 설정했기 때문에 stretch가 적용되지 않았다.
justify-content는 기본축을 따른다. 즉 기본축은 왼쪽에서 오른쪽으로 향하기 때문에 center는 그 가운데에 위치하게 된다.

[case2] flex-direction: column;

아래는 flex-direction: column; 에 justify-content와 align-items를 각각 center로 설정한 레이아웃이다.

🔼 flex-direction이 column인 경우, 기본축은 아래를 향하고 교차축은 왼쪽에서 오른쪽으로 된다.

사실 처음에 "기본축을 따른다" "교차축을 따른다"라는 개념을 맨 처음 이미지로 접하게 되면 원래 개념과는 정반대로 이해하게 된다(나는 그랬다). row과 column도 해석하면 혼란스러워 영어 그대로 사용하는 편이다. 그래서 아래처럼 정리해봤다.

조금 더: flex-items의 프로퍼티

이미 본 글에서 다루려고 했던 justify-content와 align-items에 대한 간략한 정리는 끝났지만, 추후 내가 다시 참고할 것이라 이왕 플박을 다룬 김에 유용한(종종 쓰일 것 같은) 아이템에 적용되는 프로퍼티도 정리해봤다.

"유용함"의 기준은 철저히 개인적이니 사람마다 다를 수 있다.

• order는 html 문서 상의 흐름과 관계없이 순서를 변경할 수 있다. 음수가 허용되며 수가 클수록 밀린다.
• flex-basis는 공간 배분 전에 기본 너비를 주는 것이다. 이 속성이 auto인 경우 width, height등의 속성으로 설정할 수 있다.
• align-self도 아이템에 설정할 수 있는 프로퍼티이며 교차축 정렬을 의미함. 아래 이미지 참고!