[속성] flex

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으로 지정하는 것이 된다.