CSS FlexBox 속성

*CSS FlexBox 속성

1. justify-content

- justify-content: flex-start; 요소들을 컨테이너의 왼쪽으로 정렬합니다.

- justify-content: flex-end; 요소들을 컨테이너의 오른쪽으로 정렬합니다.

- justify-content: center; 요소들을 컨테이너의 가운데로 정렬합니다.

- justify-content: space-between; 요소들 사이에 동일한 간격을 둡니다.

- justify-content: space-around; 요소들 주위에 동일한 간격을 둡니다.

 

2. align-items

- align-items: flex-start; 요소들을 컨테이너의 꼭대기로 정렬합니다.

- align-items: flex-end; 요소들을 컨테이너의 바닥으로 정렬합니다.

- align-items: center; 요소들을 컨테이너의 세로선 상의 가운데로 정렬합니다.

- align-items: baseline; 요소들을 컨테이너의 시작 위치에 정렬합니다.

- align-items: stretch; 요소들을 컨테이너에 맞도록 늘립니다.

 

3. align-self

- align-self를 통해 align-items을 개별 요소에 적용 가능

 

4. flex-direction

- flex-direction: row; 요소들을 텍스트의 방향과 동일하게 정렬합니다.

- flex-direction: row-reverse; 요소들을 텍스트의 반대 방향으로 정렬합니다.

- flex-direction: column; 요소들을 위에서 아래로 정렬합니다.

- flex-direction: column-reverse; 요소들을 아래에서 위로 정렬합니다.

 

5. order

- order: 숫자; 기본값은 0, 양수, 음수로 변경가능하다(숫자 만큼 순서 변경)

 

6. flex-wrap

- flex-wrap: nowrap; 모든 요소들을 한 줄에 정렬합니다.

- flex-wrap: wrap; 요소들을 여러 줄에 걸쳐 정렬합니다.

- flex-wrap: wrap-reverse; 요소들을 여러 줄에 걸쳐 반대로 정렬합니다.

 

7. flex-flow

- flex-flow: flex-direction값 flex-wrap값 처럼 두가지 값 설정 가능.

 

8. align-content

- align-content: flex-start; 여러 줄들을 컨테이너의 꼭대기에 정렬합니다.

- align-content: flex-end; 여러 줄들을 컨테이너의 바닥에 정렬합니다.

- align-content: center; 여러 줄들을 세로선 상의 가운데에 정렬합니다.

- align-content: space-between; 여러 줄들 사이에 동일한 간격을 둡니다.

- align-content: space-around; 여러 줄들 주위에 동일한 간격을 둡니다.

- align-content: stretch; 여러 줄들을 컨테이너에 맞도록 늘립니다.