Apr 12, 2016
[css] flex로 박스 수직정렬 응용
by 공잠
박스 세 개를 수직으로 정렬하고 싶다면, 간단합니다. 박스를 둘러싸고 있는 div에 display:flex와 flex-direction: column 을 설정하면 박스들이 수직정렬 될것입니다. 물론 flex는 모던 브라우저에서만 작동하니 잘 확인하길 바랍니다.
flex는 정렬에 있어서 너무나 탁월하고 간단합니다. 앞으로는 박스들의 정렬방식이 flex와 같은 방식으로 진행될거라 생각됩니다. 아무튼 위와 같은 경우에는 다음과 같이 구현해볼 수 있을 것입니다.
박스를 수직정렬할때 참 남감한 경우가 있었습니다. 두 개의 박스는 상단으로 정렬되고 하나의 박스는 하단으로 정렬하고 싶은 경우입니다. 아래 그림과 같이 말이죠.
flex-direction: column 설정으로는 위와 같은 케이스를 구현할 수 없습니다. 그리고 한 가지 가정을 더 하자면, position을 사용하지 않고서 구현해야 합니다. 모바일에서 키패드가 올라와서 세 번째 박스가 딸려 올라오는 상황을 원하지 않기 때문입니다. 테이블도 구현할 수 있겠지만 복잡하고 유연하지 않습니다.
오히려 flex-direction: row를 통해 구현할 수 있습니다.
자바스크립트나 position, table을 사용하지 않고 css만으로 위와 같은 형태를 구현하기 힘듭니다. 의도하지는 않았을지는 몰라도 flex에서는 아주 쉽게 가능합니다.