[CSS]Flexbox

  Flexbox의 속성과 속성값을 알아보자.

justify-content(행 정렬)

• flex-start : 요소들을 컨테이너의 왼쪽으로 정렬한다.

• flex-end : 요소들을 컨테이너의 오른쪽으로 정렬한다.

• center : 요소들을 컨테이너의 가운데로 정렬한다.

• space-between : 요소들 사이에 동일한 간격을 둔다.

• space-around : 요소들 사이에 동일한 간격을 둔다. 양 끝의 간격은 요소간 간격의 절반이다.

• space-evenly : 요소들 사이와 양 끝에 동일한 간격을 둔다.

align-items(열 정렬)

• flex-start : 요소들을 컨테이너의 꼭대기로 정렬한다.

• flex-end : 요소들을 컨테이너의 바닥으로 정렬한다.

• center : 요소들을 컨테이너의 세로선 상의 가운데로 정렬한다.

• baseline : 요소들을 컨테이너의 시작 위치에 정렬한다.

• stretch : 요소들을 컨테이너에 맞도록 늘린다.

align-self(개별 요소 열 정렬)

  align-items가 사용하는 값들을 인자로 받으며, 그 값들은 지정한 요소에만 적용된다.

align-content(여러 줄의 열 정렬)

  여러 줄 사이의 간격을 지정할 수 있다. 한 줄만 있는 경우에는 효과가 없다.

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

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

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

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

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

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

flex-direction(정렬 방향)

• row : 요소들을 텍스트의 방향과 동일하게 정렬한다.

• row-reverse : 요소들을 텍스트의 반대 방향으로 정렬한다.

• column : 요소들을 위에서 아래로 정렬한다.

• column-reverse : 요소들을 아래에서 위로 정렬한다.

flex-wrap(줄바꿈)

• nowrap : 모든 요소들을 한 줄에 정렬한다.

• wrap : 요소들을 여러 줄에 걸쳐 정렬한다(줄바꿈).

• wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬한다(줄바꿈 reverse).

flex-flow(정렬 방향 + 줄바꿈)

  flex-direction 과 flex-wrap 속성들을 간략히 한 속성이다. 공백문자를 이용하여 두 속성의 값들을 인자로 받는다.

  아래 두 예시 코드는 결과값이 같다.

#flex-direction과 flex-wrap 사용
.test  {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

#flex-flow 사용
.test  {
  display: flex;
  flex-flow: column wrap;
}

order: 숫자

order 속성은 각 요소의 순서를 바꿀 수 있다. 요소의 현재 위치를 기준으로 왼쪽은 음수, 오른쪽은 양수로 나타낸다.

#test 클래스를 3칸 움직인다
.test {
order: 3;
}

#test 클래스를 왼쪽으로 3칸 움직인다
.test {
order: -3;
}