Flex

* Flex : 유동적인 레이아웃을 손쉽게 만들기 위한 속성. 정렬태그 대신 사용 가능하다. 요소의 크기가 불분명하거나 동적인 경우에도 사용 가능.

 

 

1) justify-content : 요소를 가로선상에서 정렬해줌 (수직)

속성	기능
flex-start	요소를 컨테이너의 왼쪽에 정렬해줌
flex-end	요소를 컨테이너의 오른쪽에 정렬해줌
center	요소를 컨테이너의 중앙에 정렬해줌
space-around	요소들 사이에 동일한 간격을 줌
space-between	요소들 주변에 동일한 간격을 줌

 

 

2) align-items : 요소를 가로선상에서 정렬해줌 (수직)

속성	기능
flex-start	요소를 컨테이너의 왼쪽에 정렬해줌
flex-end	요소를 컨테이너의 오른쪽에 정렬해줌
center	요소를 컨테이너의 중앙에 정렬해줌
baseline	요소를 컨테이너의 시작위치에 정렬
stretch	요소를 컨테이너에 맞도록 늘려줌

 

 

3) flex-direction : 요소를 정렬할 방향 지정

속성	기능
row	요소를 텍스트와 동일한 방향으로 정렬
row-reverse	요소를 텍스트와 반대방향으로 정렬
column	요소를 위에서 아래로 정렬
column-reverse	요소를 아래에서 위로 정렬

* reverse 속성을 사용하면 요소의 start 와 end 지점도 뒤바뀐다.

* flex의 방향이 column일 경우 justify-content의 방향이 세로로 , align-items의 방향이 가로로 바뀐다.

 

 

 

4) flex-wrap : 요소를 한줄 또는 여러줄에 걸쳐 정렬

속성	기능
nowrap	모든 요소들을 한줄에 정렬
wrap	요소들을 여러 줄에 걸쳐 정렬
wrap-reverse	요소들을 여러줄에 걸쳐 반대로 정렬

 

 

5) align-content : 여러 줄 사이의 간격 지정

속성	기능
flex-start	여러 줄들을 컨테이너의 왼쪽에 정렬해줌
flex-end	여러 줄들을 컨테이너의 오른쪽에 정렬해줌
center	여러 줄들을 컨테이너의 중앙에 정렬해줌
space-around	여러 줄들 사이에 동일한 간격을 줌
space-between	여러 줄들 주변에 동일한 간격을 줌
stretch	여러 줄들을 컨테이너에 맞게 늘려줌

 

 

6) 기타 속성

속성	기능
order	선택자로 따로 선택 가능하며 개별요소의 순서를 지정해준다. (양수/음수 모두 사용가능) ( 지정된 숫자가 커질수록 뒷쪽에 위치하게됨 )
align-self	개별요소에 적용할 수 있는 align속성. align-items와 동일한 값을 사용한다.
flex-flow	flex-direction 과 flex-wrap 의 혼합문. 공백문자를 이용하여 두 속성을 함께 사용할 수 있다.