CSS - display

	사용예
flex	div.classname { display: flex; }	부모컨테이너의 크기에 따라 자식 요소의 크기와 위치가 변화함.
inline-flex	display: inline-flex;	인라인으로 표시
justify-content (가로축의 간격)	justify-content: flex-start; justify-content: flex-end; justify-content: center; justify-content: space-around; justify-content: space-between;	왼쪽 정렬 오른쪽 정렬 (수평)중앙 정렬 앞뒤 동일한 간격으로 정렬 양쪽끝 제외 동일한 간격으로 정렬
align-items (단일행 내의 항목 정렬)	align-items: flex-start; align-items: flex-end; align-items: center; align-items: baseline; align-items: stretch;	위쪽 정렬 아래쪽 정렬 (수직)중앙 정렬 요소 하단 정렬 높이가 늘어남 (높이 지정시 적용안됨)
flex-grow (크기확장)	flex-grow: 1; flex-grow: 2;	상위 요소의 여분공간이 늘어날 경우, 숫자크기에 비례하여 해당 요소가 늘어남.
flex-shrink (크기축소)	flex-shrink: 1; flex-shrink: 2;	상위 요소의 여분공간이 줄어들 경우, 숫자크기에 비례하여 해당 요소가 줄어듬.
flex-basis	flex-basis: 150px;	flex요소의 초기크기
flex 요약 표현 (확장 축소 기본크기)	flex: 1 2 100px; fkex: 1 100px;	flex: grow shrink basis; flex: grow basis;
flex-wrap (줄바꿈)	flex-wrap: wrap; flex-wrap: nowrap; fles-wrap: wrap-reverse;	wrap : 다음줄로 이동 nowrap : 이동하지 않음(기본값) wrap-reverse : 윗줄로 이동
align-content (여러행 정렬)	align-content: flex-start; align-content: flex-end; align-content: center; align-content: space-between; align-content: space-around;	flex-start : 위로 정렬 flex-end : 아래로 정렬 conter : 중앙 정렬 space-between : 위 아래로 정렬(중간공백) space-around : 일정한 간격으로 정렬
flex-direction(주축 및 방향)	flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse;	row : 오른쪽 상단에서 가로로 정렬 row-reverse : 왼쪽 상단에서 가로로 거꾸로 정렬 column : 오른쪽 상단에서 세로로 정렬 column-reverse : 오른쪽 하단에서 세로로 거꾸로 정렬
flex-flow	flex-flow: column wrap;	flex-flow: flex-direction flex-wrap