CSS Property - Display : Flex 속성

 

 

CSS Flex

 

---

 

• 많은 사람들이 어려워하는 Flex 속성다루기에 오신 것을 환영합니다.
• 음... 플렉스는 속성이 많아서 좀 복잡해 보일뿐, 원리만 이해하면 많이 복잡하지 않습니다. 
  
  
• 한번 시작해 봅시다~~!!

 

 

CSS Flex 에 대하여 알아봅시다~! 출발~!

 

Welcome to CODING HELL

Flex Overview

- 블럭요소들은 모두 줄바꿈 되어 표시가 되어, 스타일링을 하려면 한줄로 모으던가 여러줄로 나누는 등 디자인에 맞게 스타일링 해야하는데, 이때에 많이 사용하는 것이 flex box 입니다.

- 참조사이트 - 바로가기

 

 

A. Flex container

- 참조사이트 - 바로가기

- Flex 연습을 위해 많은 학생들이 한번씩은 해보는 개구리게임~! - 바로가기

 

B. Flex items

- Order 속성을 이용하여 순서를 지정할 수 도 있다.

- 참조사이트 - 바로가기

 

C. Flex, Grid 공통 속성

Property	Value	Description	note
gap	Number	축약형으로  gap : row-gap column-gap 을 줄여서 사용할 수 있다.	바로가기
row-gap	Number	행의 여백
column-gap	Number	열의 여백

gap은 Multiple Column 다중컬럼에서는 Safari에서 지원되지 않는다. 2024년 6월기준

 

 

 

Flexbox Floggy - 유명한 개구리 게임을 해보세요~!

https://flexboxfroggy.com/#ko

Flexbox Froggy

 

 

자, 어렵지 않아요~ 우리 영혼 챙겨가며 계속 공부해봅시다잉~~~!

 

 

본 문서는 제가 오랫동안 일해왔던 내용을 강의와 책편집을 위해 정리해둔 내용입니다.

힘들게 만든 만큼 공부하시는 분들께 도움이 되면 좋겠습니다.

제 피드를 공유하거나 링크를 해주시는것은 감사합니다~

 

 

 

본 블로그에 사용된 기본 스티커 외의 이미지들 또한 직접 제작한 것들입니다.

하여 출처없이 이미지나 내용만을 카피해서
포스트를 쓰신다거나 하는것은 하지말아주세요 ^^

감사합니다.