[CSS] display 속성 - Flex : flex-container

flex에는 두가지 요소가 있다.

flex-container : 컨테이너에 적용하는 속성 ( 부모 요소 )

flex-item : 플랙스 컨테이너를 구성하는 아이템에 적용하는 속성 ( 자식 요소 )

flex-container 

• display : flex
• flex-direction : row , column , row-reverse , column-reverse
• flex-wrap : wrap , wrap-reverse
• flex-flow : row wrap , row , wrap
• justify-content : flex-start , flex-end , center , space-between , space-around , space-evenly 
• align-items : stretch, flex-start , flex-end , center , baseline 
• align-content : wrap , stretch , flex-start , flex-end , center , space-between,space-around , space-evenly

---

Flex Container에 적용하는 속성

---

HTML 구조

1. display : flex 

 

flex container에 display : flex를 설정해준다. 

 

 

 

 

flex container안의 요소들이 가로방향으로 배치 된다. height는 컨테이너의 높이만큼 늘어난다.

height값을 지정해 줄 수도 있다.

2. flex-direction : 배치 방향 설정 

 아이템들이 배치되는 축의 방향을 결정하는 속성이다.

• row (기본값) : 가로 방향으로 배치된다. 오른쪽부터 아이템이 정렬된다.
• row-reverse : 가로방향으로 배치되는데, 왼쪽부터 정렬된다. row의 역순 
• column : 세로방향으로 배치된다. 위쪽부터 아이템이 정렬된다. 
• column-reverse : 세로방향으로 배치되는데, 아랫쪽부터 정렬된다. column의 역순

 

  3. flex-wrap : 줄넘김 처리하기 

컨테이너가 아이템을 한 줄에 담을 여유 공간이 없을 때 아이템의 줄바꿈을 어떻게 해줄것인지를 결정하는 속성이다. 

 

item들의 총 넓이가 부모 요소인 container의 넓이 보다 클 수 있도록 width값을 주었다.

 

 

nowrap은 요소들의 넓이가 부모 넓이보다 크더라도 부모 넓이에 맞게 요소들이 자동 축소가 된다. 

wrap은 요소들의 넓이가 부모 넓이를 넘게 되면 다음 줄로 줄바꿈하게 된다.

wrap-reverse는 wrap의 역순이다. 줄바꿈을 하되, item이 앞으로 이동한다.   

 

4. flex-flow : direction + wrap

flex-direction 과 flex-wrap을 한번에 써줄 수 있는 속성이다.

flex-flow : ( direction 써주기 ) ( wrap 써주기 ) ;

5. justify-content : 가로축 방향으로 정렬 

6. align-items : 수직축 방향으로 정렬

7. align-content : 여러 행을 정렬

flex-wrap: wrap; 이 설정된 상태에서,

item들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성이다.

 

 

아래 포스팅을 보고 학습하였다.

studiomeal.com/archives/197

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