#id명 {
        display: flex;         // 기본 설정
	justify-content: 인자; // 가로선 상 정렬
	align-items: 인자;     // 세로선 상 정렬
	flex-direction: 인자;  // 정렬 방향
	flex-wrap: 인자;       // n줄 정렬
	flex-flow: 인자 인자;  // flex-direction & flex-wrap 통합
	align-content: 인자;   // 여러 줄 사이 간격 지정
}

.class명 {
	order: 값;             // 값=순서변경
	align-self: 인자       // 개별요소만 적용
}

justify-content_인자 값

아래 값들을 인자로 받아 요소를 가로선 상에서 정렬

• flex-start: 요소들 정렬 ⇒ 컨테이너의 왼쪽
• flex-end: 요소들 정렬 ⇒ 컨테이너의 오른쪽
• center: 요소들 정렬 ⇒ 컨테이너의 가운데
• space-between: 요소들 사이 ⇒ 동일한 간격
• space-around: 요소들 주위 ⇒ 동일한 간격

align-items_인자 값

아래의 값들을 인자로 받아 요소들을 세로선 상에서 정렬

• flex-start: 요소들 정렬 ⇒ 컨테이너의 꼭대기
• flex-end: 요소들 정렬 ⇒ 컨테이너의 바닥
• center: 요소들 정렬 ⇒ 컨테이너의 세로선 상의 가운데 정렬
• baseline: 요소들 정렬 ⇒ 컨테이너의 시작 위치
• stretch: 요소들 ⇒ 컨테이너에 맞도록 늘림.

flex-direction_인자 값

아래의 값들을 인자로 받아 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정

• row: 요소들 정렬 ⇒ 텍스트의 방향과 동일

• row-reverse: 요소들 정렬 ⇒ 텍스트의 반대 방향 (요소들의 start/end의 순서도 반대)

• column: 요소들 정렬 ⇒ 위에서 아래

  • 다른 key들 에게 주는 영향

    • justify-content의 방향= 세로

      align-items의 뱡향= 가로로

• column-reverse: 요소들 정렬 ⇒ 아래에서 위 (요소들의 start/end의 순서도 반대)

flex-wrap_인자 값

요소들을 n줄 정렬

• nowrap: 모든 요소 ⇒ 한 줄 정렬
• wrap: 요소들 ⇒ 여러 줄 정렬
• wrap-reverse: 요소들 ⇒ 여러 줄에 걸쳐 반대로 정렬

flex-flow_인자 값

flex-direction & flex-wrap 의 값들을 인자로 받고 사이에 공백(스페이스 1개)로 구분

    flex-flow: flex-direction_인자값 wrap_인자값;

align-content_인자 값

• 여러 줄 사이 간격 지정

• align-content : 1줄 ⇒ 효과x

  align-items : 컨테이너 안에서 어떻게 모든 요소들이 정렬 하는 지를 지정

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

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

• center: 여러 줄들 ⇒ 세로선 상의 가운데 정렬

• space-between: 여러 줄들 사이 ⇒ 동일한 간격

• space-around: 여러 줄들 주위 ⇒ 동일한 간격

• stretch: 여러 줄들 ⇒ 컨테이너에 맞도록 늘림.

order

• 값으로 순서 변경 가능
• order의 값
  • 기본 값= 0
  • 양수/음수 전환 가능
    • 양수 ⇒ 오른쪽 이동
    • 음수 ⇒ 왼쪽 이동

align-self

• 개별(지정) 요소만 적용
• align-items가 사용하는 인자 값 받음