서론

CSS는 오랫동안 적절한 레이아웃 메커니즘이 부족했습니다. 트랜슬레이션(Translation), 애니메이션, 필터, 이들은 모두 훌륭하고 유용한 추가기능이지만, 그것들은 웹 개발자들이 끝없이 불평하던 것에 대해 다루지 않습니다.

마침내, 우리는 Flexbox라는 해결책을 갖게 되었습니다.

이 사이트는 CSS 프레임워크가 아닙니다. CSS로만은 해결하기 어려웠거나 해결하는 게 불가능했지만 Flexbox를 통해 아주 쉽게 해결할 수 있는 문제들을 소개하는 사이트입니다. 또한, 최근 Internet Explore 11과 Safari 6.1이 배포되면서, 최신 Flexbox 스펙은 모든 모던 브라우저에서 지원되기 시작했습니다.

아래의 데모들을 참고하세요. Web inspector로 스타일을 찍어보거나, 소스 코드를 직접 보면서 Flexbox가 CSS 레이아웃의 주류가 되는 것이 얼마나 쉬울 지 확인해보세요.

둘러보기

  • 더 나은, 간단한 그리드 시스템

    더 나은, 간단한 그리드 시스템

    Flexbox는 그리드 시스템에 필요한 대부분의 기능을 제공합니다. 사이즈 조절 및 정렬은 그냥 수 많은 속성 중 하나에 불과합니다.

  • 성배 레이아웃

    성배 레이아웃

    이 전형적인 문제는 CSS 해커들이 몇 년간 해결하려 노력했지만, 아직까지 유의미한 해결책은 나오지 않았습니다. Flexbox를 사용하면, 마침내 해결이 가능합니다.

  • Input 추가 요소

    Input 추가 요소

    꽉찬 너비를 가진 유연한 input/버튼 쌍을 만드는 것은 지금까지의 CSS로는 거의 불가능했습니다. Flexbox는 이를 구현하는 가장 쉬운 방법입니다.

  • 미디어 객체

    미디어 객체

    오버플로우, clearfix 혹은 블록 서식 문맥에 대한 걱정없이 고정되거나 다양한 크기의 이미지를 가진 미디어 객체를 만듭니다.

  • 고정된 푸터

    고정된 푸터

    페이지의 내용이 충분히 차있지 않을 때 푸터를 하단에 고정시키는 건 항상 어려운 일이었습니다. 그리고 푸터의 높이를 알 수 없다면, 사실상 불가능합니다. 이젠 더 이상 불가능하지 않습니다.

  • 수직 중앙 정렬

    수직 중앙 정렬

    이 전형적인 문제는 CSS 해커들이 몇 년간 해결하려 노력했지만, 아직까지 유의미한 해결책은 나오지 않았습니다. Flexbox를 사용하면, 마침내 해결이 가능합니다.

브라우저 지원

  • Chrome
    21+
  • Opera
    12.1+
  • Firefox
    22+
  • Safari
    6.1+
  • IE
    10+
  • Edge
    All

주의사항 및 알려진 문제

  • IE 10은 Flexbox를 지원하지만 현재 스펙의 초안(display:flexbox)만을 지원합니다.
  • Safari 6 및 구버전은 현재는 사라진 Flexbox 문법의 원래 버전(display:box)을 지원합니다.
  • Firefox 27 및 구버전은 여러 줄에 걸친 Flexbox를 지원하지 않습니다. 자세한 내용은 이 버그를 참조하세요.
  • 전체 브라우저 지원 비교를 보고 싶다면 caniuse.com/flexbox를 참조하세요.

코드에 대해서

이 사이트에 있는 코드는 모두 Flexbox로 특정한 디자인 문제를 해결하는 방법입니다. 모든 코드는 사양이 호환되는 브라우저에서 데모를 작동시키는데 필요한 코드만 보여줍니다. 특정 브라우저에서는 Flexbox 스펙의 마지막 버전을 완전히 준수하지 않으므로 안타깝게도 몇 가지 대응책이 필요합니다.

완전히 사양이 호환되지 않는 브라우저를 위한 대응책은 코드 예제에는 나타나 있지 않습니다. 그러나 구현 세부사항에 관심이 있다면 소스 파일을 체크해보시기 바랍니다. 각각의 데모는 소스코드를 링크하고 있으며, 특정 브라우저를 위한 대응책도 모두 잘 문서화되어 있습니다. 그러니 코드보는 것을 두려워할 필요가 없습니다.

현재의 Flex 속성을 각 벤더(Vendor)별로 Prefixing 하고 번역(Translating)하는 것은 모두 autoprefixer가 처리하고 있습니다. 만약 Flexbox 코드를 작성하면서 autoprefixer를 사용하지 않는다면 끔찍한 실수를 하고 계신 겁니다.

코드 예제 및 소스 코드에서 사용하고 있는 클래스 작명 컨벤션은 SUIT CSS에서 온 것이며 이 프로젝트는 BEM 방법론에 기초하고 있습니다. 각 예제는 하나 이상의 재사용 가능한 CSS 컴포넌트를 포함하고 있으므로 이 패턴을 당신의 프로젝트에 적용하거나 복사할 수 있습니다. 링크는 각 예제 페이지의 각각의 컴포넌트에 의해 제공됩니다.

만약 어떤 실수를 찾았거나 추가적인 예제를 제안하고 싶다면, Github에 자유롭게 Issue를 남겨주시거나 Pull Request를 보내주시기 바랍니다.

한국어 번역

한국어 번역은 @hyunseob이 개인적으로 진행하였습니다. 오탈자나 더욱 매끄러운 번역은 이 레포지토리에 Issue를 남겨주시거나 kr 브랜치로 Pull Request를 보내주시기 바랍니다. 감사합니다.