5 가지 주요 Flexbox 리소스

콘텐츠

• 01. Flexbox 게임
• 02. Flexbox Froggy
• 03. Flexbox 방어
• 04. Flexbox에 대한 완전한 가이드
• 05. Flexbox 레이아웃 예제

Flexbox 또는 Flexible Box Layout 덕분에 반응 형 웹 디자인 작업이 그 어느 때보 다 쉬워졌습니다. 웹 디자이너와 개발자에게 컨테이너에서 요소를 배치, 정렬 및 배포 할 수있는 효율적이고 간단한 방법을 제공하는 강력한 CSS 모듈입니다. 그것은 우리가 오랫동안 해결하기 위해 고심했던 많은 레이아웃 문제를 해결합니다.

또한 웹에서 사용할 수있는 다양한 리소스 덕분에 Flexbox를 배우는 것이 어려울 필요가 없습니다. 이 가이드, 리소스 및 게임을 사용하면 즉시 flexbox 근육을 유연하게 할 수 있습니다.

01. Flexbox 게임

Flexbox Game을 사용하면 코드를 한 줄도 작성하지 않고도 Flexbox 레이아웃 퍼즐을 시각적으로 해결할 수 있습니다. 당신이 시각적 인 학습자라면 이것이 당신을위한 것입니다.

02. Flexbox Froggy

일부 개구리가 연못을 건너는 것을 돕는 동안 flexbox의 기초를 가르쳐주는 온라인 게임입니다. Flexbox로 이동하는 것이 그 어느 때보 다 쉬워졌습니다.

03. Flexbox 방어

Flexbox가 심각하지 않다고 누가 말합니까? 이 게임에서는 일반적인 플렉스 박스 레이아웃을 사용하여 대포를 배치하고 다가오는 적의 파도를 막습니다.

04. Flexbox에 대한 완전한 가이드

CSS-Tricks는 모든 flexbox 코드 스 니펫을위한 훌륭한 리소스입니다. 이 항목을 북마크하십시오.

05. Flexbox 레이아웃 예제

Webflow에서는 가장 일반적인 flexbox 레이아웃 중 일부를 설계하고 구축했습니다. 여기에서는 직접 쉽게 만들 수있는 방법을 알려드립니다.

이 기사는 원래 넷 매거진 문제 282; 여기서 사세요!