CSS - flexbox =

display: flex;

-> 속성 : 값;

1. 가로선 상에서의 정렬

- justify-content : flex-start; (default)
	요소들을 컨테이너의 왼쪽으로 정렬.
- justify-content : flex-end;
	요소들을 컨테이너의 오른쪽으로 정렬.
- justify-content : center;
	요소들을 컨테이너의 가운데로 정렬.
- justify-content : space-between;
	요소들 사이에 동일한 간격을 둠.
- justify-content : space-around; 
	요소들 주위에 동일한 간격을 둠.

2. 세로선 상에서의 정렬

- align-items : flex-start; 
	요소들을 컨테이너의 꼭대기로 정렬.
- align-items : flex-end;
	요소들을 컨테이너의 바닥으로 정렬.
- align-items : center;
	요소들을 컨테이너의 세로선 상의 가운데로 정렬.
- align-items : baseline;
	요소들을 컨테이너의 시작 위치에 정렬.
- align-items : stretch; (default)
	요소들을 컨테이너에 맞도록 늘림.
    
++ 
	align-self : (align-items의 값을 인자로 받음.)
	=> 지정한 개별요소에 적용할 수 있음.

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

- flex-direction : row;  (default)
	요소들을 텍스트의 방향과 동일하게 정렬.
- flex-direction : row-reverse;	
	요소들을 텍스트의 반대 방향으로 정렬.
- flex-direction : column;
	요소들을 위에서 아래로 정렬.
- flex-direction : column-reverse;
	요소들을 아래에서 위로 정렬.

4. 요소들의 정렬

- flex-wrap : nowrap; (default)
	요소들을 한 줄에 정렬.
- flex-wrap : wrap;
	요소들을 여러 줄에 걸쳐 정렬.
- flex-wrap : wrap-reverse; 
	요소들을 여러 줄에 걸쳐 반대로 정렬.
    
    
    
++ 
	flex-flow : (flex-direction과 flex-wrap의 값을 임의로 조합해서 사용.)
	=> flex-direction과 flex-wrap이 자주 같이 사용되기 때문에 추가된 속성.

5. order 속성

- order :  (양수 또는 음수), 기본 값 = 0
	=> 순서를 세부적으로 바꾸고 싶을 때.

6. 여러 줄 사이의 간격을 지정

- align-content : flex-start;
	여러 줄들을 컨테이너의 꼭대기에 정렬.
- align-content : flex-end;
	여러 줄들을 컨테이너의 바닥에 정렬.
- align-content : center;
	여러 줄들을 세로선 상의 가운데에 정렬.
- align-content : space-between;
	여러 줄들 사이에 동일한 간격을 둠.
- align-content : space-around;
	여러 줄들 주위에 동일한 간격을 둠.
- align-content : stretch;
	여러 줄들을 컨테이너에 맞도록 늘림.

++
align-content는 여러 줄들 사이의 간격을 지정.
align-items는 컨테이너 안에서 어떻게 모든 요소들이 정렬하는지를 지정함. 
한 줄만 있는 경우, align-content는 효과를 보이지 않음.
++

flexbox의 기본개념 :