기기가 다양해짐에 따라 화면 크기도 다양하게 변화되었다. 다양한 기기에 대응하기 위해 웹 서비스를 유연하게 만드는 것은 선택이 아닌 필수가 되었다.
다양한 화면의 크기에 맞추어 유연하게 대응할 수 있는 레이아웃을 만들기 위해 새롭게 추가된 속성이 Flex와 Grid이다. Flex는 1차원 적인 레이아웃을 잡을 때 사용하며, grid는 2차원 적인 레이아웃을 잡을 때 용이하다.
Flex는 부모 요소(컨테이너) 아래에서 ****자식 요소(아이템)들이 한 방향으로 배치가 된다. 따라서 행 또는 열 한 가지 방향으로 레이아웃을 배치해야 하는 경우에 사용한다. 또한 다양한 속성을 통해 자식 요소 사이를 일정한 간격으로 줄 수 있고 정렬하기가 매우 편하다.
Grid는 행과 열 Matrix 형태로 레이아웃을 배치해야 하는 경우 사용한다. 원하는 요소를 어디서부터 어디까지, 어느 방향으로 차지하게 할 건지 정하고 배치하면 된다.
지금부터 ‘알아서 잘 딱 깔끔하고 센스 있게’ Flex를 배워보자.
같은 이미지로 grid도 설명하니 비교해보면서 보길 권한다. 첫번째 이미지에 있는 빨간색 박스를 모두 flex로 구현할 수 있다.
카드를 순서대로 배치할 수 있고, 각 카드 내부에서 Flex를 이용해서 요소를 보다 쉽게 배치할 수 있다.
flex로 구현된 UI - 1
Flex를 활용한 홈페이지다. 전체적인 레이아웃을 Flex로 배치하고, 아이템들 또한 Flex를 사용한 것을 확인할 수 있다. 이처럼 Flex를 사용한다면, 기존에 float를 이용한 방법보다 더욱 쉽고 간편하게 요소들은 배치할 수 있다.