[CSS] Flex속성

💡 Flex란 무엇일까?

부모 요소인 div.container를 Flex Container라고 부르고,

자식 요소인 div.item들을 Flex Item이라고 부른다.

즉 , 컨테이너가 Flex의 영향을 받는 전체 공간이고

=> 부모 요소 안에서 자식요소인 아이템들이 배치되는 것임.

 

이것들을 분리해서 적용하는 것이 가장 중요함!!

부모 속성(container)

=> flex-direction / flex-wrap / justify-content / align-items / align-content

자식 속성(item)

=> flex / flex-grow / flex-shrink / flex- basis / order

 

Flex Container에 적용하는 속성들

일단 display : flex를 적용하자.!

그러면 이렇게 가로 방향으로 배치되고,

자신이 가진 내용물의 width만큼만 차지하게 됨! ( = inline속성과 같음)

height는 컨테이너의 높이만큼 늘어남!

(inline-flex 는 inline-block속성과 같음)

 

Flex-direction : 아이템들이 배치되는 축의 방향 결정 (가로 정렬 OR 세로 정렬)

row	행(가로) 방향으로 배치
row-reverse	행(가로) 역방향으로 배치
column	열(세로) 방향으로 배치
column-reverse	열(세로) 역방향으로 배치

Flex-wrap : 줄바꿈 속성

=> 컨테이너가 더이상 아이템을 한 줄에 담을 여유 공간이 없을 때

nowrap : 줄바꿈 없음

wrap : 줄바꿈 함

wrap-reverse : 줄바꿈하는데 아이템을 역으로 배치함!

 

Flex-flow 

=> flex-direction과 flex-wrap을 한꺼번에 지정할 수 있는 단축 속성!

위의 코드를 줄여서 아래와 같이 합친 것!

justify-content : 가로 정렬

flex-start : 아이템들을 시작점으로 정렬

align-items : 세로 정렬 

stretch : 세로로 쭉 늘어남

align-content : 여러 행 정렬

=> flex-wrap : wrap (줄바꿈)을 한 상태에서 세로정렬을 할 수 있다!!

<사용한 색상들>

지금까지는 flex.container에 적용되는 속성들을 알아보았다.

다음시간에는 flex.item에 적용되는 속성들을 알아보자.