FlexBox

justify-content : 요소들을 가로선 상에서 정렬

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

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

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

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

- space-around : 요소들 주위에 동일한 간격을 둔다.

 

 align-items : 요소들을 세로선 상에서 정렬

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

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

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

- baseline : 요소들을 컨테이너의 시작 위치에 정렬

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

#pond {
  display: flex;
  justify-content : center;
  align-items : center;
}

 

flex-direction : 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정.

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

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

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

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

#pond {
  display: flex;
  flex-direction : column;
}

 

order : 기본값은 0이며, 양수나 음수로 바꿀수있다.

#pond {
  display: flex;
}

.yellow {
	order : 1
}

 

align-self : 지정된 `align-items`값을 무시하고 flex 요소를 세로상에서 정렬.

#pond {
  display: flex;
  align-items: flex-start;
}

.yellow {
	order : 3;
	align-self:flex-end;
}

 

flex-wrap : flex 요소들을 한줄 또는 여러줄에 걸쳐 정렬.

- nowrap : 모든 요소들을 한 줄에 정렬

- wrap : 요소들을 여러 줄에 걸쳐 정렬

- wrap-reverse : 요소들을 여러 줄에 걸쳐 반대로 정렬

#pond {
  display: flex;
  flex-wrap : wrap;
}

 

flex-flow : `flex-direction` 과 `flex-wrap`을 간략하게 한 속성

- row wrap : 가로선 상 여러줄에 걸쳐 정렬

#pond {
  display: flex;
  flex-flow : column wrap
}

 

align-content : 세로선 상에 여분의 공간이 있는 경우 Flex 컨테이너 사이의 간격을 조절한다.

한줄밖에 안하는 flex container에는 아무런 의미가 없다. 2줄 이상이어야 의미가 있다. (i.e. flex container의 값이 flex-wrap: nowrap 이면 의미가 없다.

 

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

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

- center: 여러 줄들을 세로선 상의 가운데에 정렬.

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

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

- stretch: 여러 줄들을 컨테이너에 맞도록 늘린다.

#pond {
  display: flex;
  flex-wrap: wrap;
  flex-direction : column-reverse;
  align-content : center;
}

 

종합 마무리

#pond {
  display: flex;
  flex-direction : column-reverse;
  flex-wrap : wrap-reverse;
  justify-content : center;
  align-content : space-between;
}