[프론트엔드] Flex
개발을 하다보면 css는 뭔가 기계적으로 작성하게 되는 경향이 있는 것 같다.
특히 그 중에서 정말 밥먹듯이 쓰는 flex에 대해 알아보자.
Flexbox
간혹 flex에 대해 그저 수평정렬이라고 오해하는 사람들이 있다... (나만 그랬나..?)
암튼 flex는 단순히 수평 정렬이 아니다.
정확히는 주축(main axis)에 대한 정렬이다.
자, 근데 주축에 대한 정렬이라하면 크게 와닿지 않는다.
우리가 흔히 flex를 수평 정렬이라고 오해할수 있는 이유는 display: flex의 main축의 기본값이 가로(row)이기 때문이다.
즉, flex-direction으로 설정된 값(row, column)에 따라 main축이 바뀔 수 있으면 이 축에 따라 컨텐츠들을 display한다는 것이다.
그렇기에 flex-direction 속성을 통해 주축을 column으로 변경하게 되면 수직 정렬이 되는 것이다.
아래 예시를 보면 보다 직관적으로 이해할 수 있을 것이다.
많이들 사용해보았을것같은 space-between, evenly, start, end 같은 것들은 일단 제처두고,
align-content와 items의 차이에 대해 설명해보고자 한다.
이유는 필자가 처음 배울때 헷갈려서 다른분들도 그렇게 느낄 수 있을 것 같다고 생각하기 때문이다.
Justify & Align
일단 이 둘의 차이점을 설명하기전에 justify과 main축에 대해 정렬을 제어하는 요소라면, align은 반대로 교차(cross)축에 대한 정렬을 제어하는 요소이다.
즉, flex-direction이 row라면, cross축은 column이 될것이고, column이라면 cross축은 row가 될 것이다.
이 예시를 보면 보다 직관적으로 이해할 수 있을 것이다. main 축인 가로에 대해 중앙으로 정렬하고, cross 축은 세로에 대해서도 중앙으로 정렬을 한다면 사진처럼 화면의 정중앙에 요소가 위치하게 되는 것이다.
align-items VS align-content
결론부터 말하면 align-content와 items의 차이는 cross축을 기준으로 적용 대상이 한줄이냐, 여러줄이냐라고 볼 수 있다.
그렇다면 align-content는 적용 대상이 여러줄이라는 것이 된다.
아래 예시를 참고하면 이 둘의 차이를 보다 직관적으로 이해할 수 있을 것이다.
.align-items-example {
display: flex;
width: 150px;
height: 150px;
align-items: center; /* 각 항목을 교차축 기준으로 중앙 정렬 */
}
.align-content-example {
display: flex;
flex-wrap: wrap; /* 여러 줄로 항목을 배치 */
height: 300px;
width: 300px;
align-content: center; /* 여러 줄을 교차축 기준으로 중앙 정렬 */
}
가장 먼저 눈에 띄는 것은 align-items만 적용한 컨테이너의 경우 요소들이 삐져나와있는 것을 볼 수 있다.
일단 그 이유는 flex-wrap이 적용되지않아서이고, align-content의 경우 flex-wrap이 적용되어 있기 때문이다.
그리고 또 하나 다른 점은 items와 달리 한줄하고 그 다음줄에 대해서도 중앙 정렬이 야무지게 적용되어 있다는 점이다.
즉, align-items의 경우 Flex 컨테이너 내에서 각 항목들이 한 줄에 배치되어 있을 때 사용되며, Flex 컨테이너의 한 줄 내에서 항목들을 교차 축에 따라 정렬한다는 것이다. 또한, 여러 줄이어더라도 각각의 항목을 개별적으로 교차축 기준으로 정렬한다는 것이다.
반면, align-content의 경우, Flex 컨테이너 내에서 각 항목들이 여러줄에 배치되어 있을 때 사용되며, 다른 말로는 기본적으로 flex-wrap이 적용된 경우에 효과가 있는 녀석이라는 것이다. 그렇기에 flex에서 align-content는 wrap이나 wrap-reverse가 설정되어 있지 않다면 해당 속성은 아무런 효과도 발휘하지 않는 것이다.