flex란?

컨텐츠를 정렬하거나 공간을 나눌 수 있는 CSS 속성의 집합입니다. MDN 문서와 1분코딩의 블로그, code pen에서 flex가 실행되는 화면을 바로 확인하실 수 있습니다.

flexbox의 기본 개념 - CSS: Cascading Style Sheets | MDN

이번에야말로 CSS Flex를 익혀보자

Flexbox playground

• 기본 코드

기본 속성 정보

• 아래 여러가지 실습을 하게 될텐데 개발자 도구를 참고하시면 GUI 기능으로 잘 정리가 되어 있으니 참고하시면서 개발하시길 바랍니다.

  

1. 새로운 display 속성입니다.

display:flex;
display:inline-flex;

2. Block 레벨 요소의 성질을 가지며 주로 부모의 속성을 통해 자식들을 컨트롤 합니다.

이때 부모를 Flex-container, 영향을 받는 자식들을 Flex-item이라고 부릅니다.

3. flex는 자신의 직계자식까지만 영향을 미칩니다.

1. flex-direction