flex
- display 속성 값이 'flex' 혹은 'inline-flex'인 부모(Flex 컨테이너)가 가지는 자식 요소들의 흐름을 쉽게 설정하기 위해 사용한다.
[속성] flex-direction
-
Flex 컨테이너에 지정하는 속성이다.
-
이가 가지는 자식 요소들에 대한 흐름의 방향을 지정한다.
-
이때 자식 요소들의 display 값과 관계 없이 정렬한다.
-
속성 값 :
-
row : 행방향(가로방향) 정렬
-
row-reverse : 행방향(가로방향) 역정렬
-
column : 열방향(세로방향) 정렬
-
column-reverse : 열방향(세로방향) 역정렬
[속성] justify-content
-
Flex 컨테이너에 지정하는 속성이다.
-
'flex-direction' 속성 값의 방향과 수평한 방향에 대한 정렬이다.
-
속성 값 :
-
flex-start(start) : 흐름의 방향에 대한 시작점 부터의 정렬.
-
flex-end(end) : 흐름의 방향에 대한 끝점 부터의 정렬.
-
center : 흐름의 방향에 대한 가운데 정렬
-
(잘 안씀) left : 흐름의 방향에 대한 화면상 왼쪽 정렬.
-
(잘 안씀) right : 흐름의 방향에 대한 화면상 오른쪽 정렬.
-
space-between : 자식 요소들 간 거리를 같은 비율로 나누어 정렬. (좌 우 여백은 가지지 않음)
-
(잘 안씀) space-around : 자식 요소들 간 거리를 같은 비율인 x로, 양 끝 빈 공간에 대해 x/2로 나누어 정렬.
[속성] align-items
-
Flex 컨테이너에 지정하는 속성이다.
-
'flex-direction' 속성 값의 방향과 수직한 방향에 대한 정렬이다.
-
속성 값 :
-
flex-start : 시작점 정렬. (flex-direction 속성 값이 row|row-reverse 일때 위쪽 정렬)
-
flex-end : 끝점 정렬. (flex-direction 속성 값이 row|row-reverse 일때 아래쪽 정렬)
-
center : 가운데 정렬.
-
stretch : 늘어뜨림.
[속성] align-content (잘안씀)
-
Flex 컨테이너에 지정하는 속성이다.
-
개행이 이루어지지 않은 Flex 컨테이너 혹은 'flex-wrap'이 'nowrap'인 경우 무시된다.
-
'align-items' 속성 같은 경우, 각 축에 대한 'flex-direction'과 수직한 방향으로의 정렬이나, 'align-content'는 전체 내용과 컨테이너간의 'flex-direction' 과 수직한 방향으로의 정렬이다.
[속성] flex-wrap
-
Flex 컨테이너에 지정하는 속성이다.
-
'justify-content' 방향으로 넘치는 자식 요소에 대해 'align-items' 방향으로 개행할 것인가에 대한 설정이다.
-
속성 값:
-
nowrap : 개행하지 않는다. (기본값)
-
wrap : 개행한다.
[속성] flex-basis
-
Flex 컨테이너의 자식에게 부여하는 속성이다.
-
해당 요소의 기본 크기를 지정한다. 'flex-direction'과 수평한 방향의 크기를 지정하는데, 'row' 혹은 'row-reverse'일 때 'width'와 같고, 'column' 혹은 'column-reverse'일 때 'height'와 같다.
[속성] flex-grow
-
Flex 컨테이너의 자식에게 부여하는 속성이다.
-
해당 요소가 'flex-direction'과 수평한 방향으로 (빈 공간을 차지하며) 늘어나는 비율을 지정한다.
-
기본 값은 0이며 0일 때 늘어나지 않는다.
[속성] flex-shrink
-
Flex 컨테이너의 자식에게 부여하는 속성이다.
-
해당 요소가 'flex-direction'과 수평한 방향으로 줄어드는 비율을 지정한다.
-
기본 값은 0이며 0일 때 줄어들지 않는다.
flex
-
Flex 컨테이너의 자식에게 부여하는 속성이다.
-
'flex-grow', 'flex-shrink', 'flex-basis' 속성 값을 한번에 적을 때 사용한다.
-
flex : [flex-grow 값][flex-shrink 값]; (이 때 flex-basis 값은 auto가 된다.)
-
flex : [flex-grow 값][flex-shrink 값] [flex-basis 값];
-
flex : [flex-grow와 flex-shrink값|flex-basis 값]; (길이 단위 없이 숫자만 적으면 flex-grow와 flex-shrink 값이 되며, 이가 아니라면 flex-basis 값을 지정하게 된다.)
-
flex: 1;은 flex-shirnk와 flex-grow 값을 1로 지정하는 것이 된다.
-
flex: 1rem; 은 flex-basis값을 1rem으로 지정하는 것이 된다.
