Flexbox 패턴 궁극의 CSS Flexbox 코드 라이브러리

최신 CSS flexbox 속성은 개발자가 인터페이스를 만드는 방법을 근본적으로 변화 시켰습니다. 더 이상 수레와 CSS 해킹이 없어 레이아웃을 완벽하게 맞출 수 있습니다. 멀티 컬럼 레이아웃을 다루는 커스텀 대응 기술에 대해 걱정하지 않아도됩니다..

그러나 flexbox가 많은 문제를 해결하더라도 배우기가 복잡합니다. 시작을 돕기 위해 많은 다른 flexbox 요소를 하나의 중앙 위치로 분류하는 Flexbox Patterns라는 새로운 온라인 라이브러리가 있습니다.

이 라이브러리는 완전히 자유롭게 사용할 수 있으며 GitHub에서 오픈 소스입니다. 모든 예는 NPM을 통해 로컬로 다운로드 또는 GitHub 통해. 그러나 웹 사이트를 통해 예제를 탐색하여 필요에 따라 코드를 복사하고 붙여 넣을 수도 있습니다.

각 패턴에는 간단한 설명과 코드 샘플이 포함 된 자체 페이지가 있습니다. 너는 말 그대로 코드를 복사하여 기존 웹 프로젝트에 붙여 넣기하십시오., 코드가하는 일과 사용하는 이유에 대해 먼저 배우는 것이 좋습니다..

flexbox를 사용하여 예를 들어 사이트 헤더 바 데모를 사용하면 상단 탐색 표시 줄의 모든 요소를 ​​나란히 정렬 할 수 있습니다..

일반적으로 이것은 모든 것을 올바르게 정렬하기 위해 float와 clearfix 클래스를 필요로합니다.

flexbox를 사용하면 모든 컨테이너를 디스플레이 : 플렉스 재산. 이렇게하면 요소가 상호 작용하는 방법 정의 서로와 어떻게 flexbox 작은 화면에서 작동해야합니다..

패턴은 지속적으로 업데이트되고 현재 라이브러리는 탭, 사이드 바 및 수직 / 수평 중심 맞춤과 같은 가장 일반적인 요소에 중점을 둡니다..

Flexbox를 처음 접했을 경우 Flexbox Patterns를 꼭 확인하십시오. 이 사이트는 flexbox의 모든 기본 사항을 가르쳐주지는 않지만 자신 만의 웹 프로젝트를 위해 실제 예제를 제공 할 것입니다.