flexbox

    [CSS] Flex (Flexbox)

    Flex Flex는 Flexible Box라고 불릴 만큼 유연한 레이아웃을 표현할 수 있다. 또한 Grid와 더불어 대표적인 차세대 CSS 레이아웃으로 알려져 있다. Grid는 Flex보다 더 최신 문법이고 Flex 레이아웃이 대부분 Grid로도 구현할 수 있긴 하다. 그렇다고 Flex를 배울 필요가 없는 것은 아니다. 설계 목적이 다르기 때문이다. Flex: 1차원 레이아웃 Grid: 2차원 레이아웃 이러한 차이 때문에 Grid로는 구현이 어렵지만 Flex가 더 편리한 경우가 많이 존재한다. 만약 레이아웃을 만들 때 행, 열 중 하나만 다룬다면 Flex를, 둘 다 다룬다면 Grid를 고려해보자. (참고로 Safari에선 Flexbox가 동작하지 않는 이슈가 많다. 주의하자) 기본 구조 Flex 레이아웃..