CSS flex

flex

flexbox의 구성

flex를 설명하기 위해 임의의 flexbox와 내부 item을 설정하였다.

flex-container

정렬이 필요한 요소를 감싸는 외부 요소를 말한다.
div로 구성된 공간을 설정할 때, 가장 밖의 공간에 있는 div를 생각하면 된다.

item

정렬을 적용할 내부의 요소이다.

css 에서 display : flex; 의 값을 주게 되면 내부 item의 margin 요소가 사라지고 content 영역 만큼의 크기만 가지게 된다.

1. flex-container( (ex)외부 div )의 속성

flex-direction

중심축을 설정하는 속성이다

	행 방향 정렬(기본값)
    flex-direction: row;

    행 방향(가로 + 순서 반대)
    flex-direction: row-reverse;

    열 방향(세로)
    flex-direction: column;

    열 방향(세로 + 순서 반대)
    flex-direction: column-reverse;

flex-wrap

wrap 속성을 nowrap으로 하면 item들이 강제로 한줄로 배치가 된다.
만약 nowrap으로 설정하면 한 줄을 벗어나서 여러 줄로 배치가 된다.

	(기본값)
	flex-wrap : nowrap;

	여러 줄로 나누어서 정렬
	flex-wrap : wrap;

	여러 줄로 나누어 정렬(반대로)
	flex-wrap : wrap-reverse;

flex-flow

flex-direction과 flex-wrap 속성을 한 번에 사용하는 방법

justify-content

중심축 방향으로 item의 정렬 방법을 조정

	중심축 시작 지점을 기준으로 정렬(기본값)
	justify-content : flex-start;

	중심축 끝 지점으로 정렬
	justify-content : flex-end;

	중심축 가운데로 정렬
	justify-content : center;

	item들 간 공간을 두어 중심충 양쪽으로 일정한 크기 공간을 추가
	양 끝에 조금 공간을 두고, item들간은 넓게 공간을 둠
	justify-content : space-around;
	
	item들 간 공간을 두어 중심충 양쪽으로 일정한 크기 공간을 추가
	양 끝에 item들간 모두 같은 공간을 둠
	justify-content : space-evenly;

	item들 간 공간을 두어 중심충 양쪽으로 일정한 크기 공간을 추가
	양 끝을 붙이고, item들간은 공간을 둠
	justify-content : space-between;
	

align-items

item들을 교차축 방향으로 정렬하는 방법을 지정. 이 때 교차축 방향의 크기 지정속성이 없어야 한다.

	기본값
	align-items : stretch;

	시작부분 기준으로 정렬
	align-items : flex-start;

	끝부분 기준으로 정렬
	align-items : flex-end;
	
	가운데 기준 정렬
	align-items : center;

	item들 간의 축을 일자로 놓기 위해서 item요소를 중심축으로 움직임
	align-items: baseline;
	

align-content

flex-wrap 속성을 wrap이나 wrap-reverse 속성으로 두었을 때, 교차축 방향으로
justify-content의 모든 속성을 사용

	교차축 방향 시작 지점에 item 정렬
	align-content : flex-start;

	교차축 방향 끝 지점으로 item 정렬
	align-content : flex-end;
	
	교차축 방향으로 가운데 item 정렬
	align-content : center;

	교차축 방향으로 item들을 일정한 공간을 나누어 정렬
	align-content : space-around;

	교차축 방향으로 item들을 동일하게 공간을 나누어 정렬
	align-content : space-evenly;

	교차축 방향으로 item들을 처음과 끝 부분을 붙인 상태로 정렬
	align-content : space-between;
	

2. 각 item들에 부여하는 속성

order

flex-container 내부에 item 순서를 지정

flex-grow

flex-container 내부에 item을 비율에 맞게 팽창시킴 기본값 0 (팽창 안 함)

flex-shrink

item들이 수축하는 정도를 지정 기본값 1

flex-basis

중심축 방향으로 각 item들의 점유율(크기)을 정함. 다양한 크기 단위 사용 가능하다.

align-self

각 item의 교차축 방향으로 정렬 지정 가능

	교차축 첫 시작 방향으로 정렬
	align-self : flex-start;

	교차축 끝 방향으로 정렬
	align-self : flex-end;

	교차축 가운데로 정렬
	align-self : center;