Flex 속성(컨테이너에 적용하는 속성)

 

레이아웃 배치를 목적으로 만들어진 기능
컨테이너에 적용되는 속성과 아이템에 적용되는 속성이 있다

컨테이너에 적용되는 속성

display: flex

각 아이템(요소)들의 width값과 height값만큼 크기가 변경되고 가로 방향으로 정렬한다

{
.container {
	display: flex;
    display: inline-flex;
}
}

flex-direction

아이템들이 배치되는 축의 방향을 결정한다, 메인축(정렬된 아이템의 축 기준)의 방향을 가로, 세로로 할지 결정한다

{
.container {
	flex-direction: row;  					// 아이템들의 방향이 행(가로)으로 정렬된다
	flex-direction: column;					// 방향을 열(세로)으로 정렬한다	
	flex-direction: row-reverse;			// 아이템들이 역순으로 가로 방향으로 정렬된다
	flex-direction: column-reverse;			// 세로 방향으로 역순으로 정렬된다
}
}

flex-wrap

컨테이너의 공간이 부족할때 아이템들의 줄바꿈을 어떻게 할지를 설정한다

{
.container {
	flex-wrap: nowrap;				// 줄바꿈을 하지 않는다
	flex-wrap: wrap; 				// 줄바꿈을 실행한다
	flex-wrap: wrap-reverse;		// 아이템들을 역순으로 배치하고 줄바꿈을 실행한다
}

flex-flow

flex-direction 속성과 flex-wrap 속성을 한번에 설정할 수 있는 단축 속성

{
.container {
	flex-flow: row wrap;
}

justify-content

메인축 방향으로 아이템들을 정렬하는 속성

{
.container {
	justify-content: flex-start;		// 아이템들을 시작지점으로 정렬한다
	justify-content: flex-end;			// 끝 지점으로 정렬한다
	justify-content: center;			// 가운데로 정렬한다
	justify-content: space-between;     // 아이템 사이의 규격을 동일하게 설정한다
	justify-content: space-around;		// 아이템 둘레를 동일하게 설정한다
	justify-content: space-evenly;	    // 아이템들의 사이의 규격과 양 끝부분 규격을 동일하게 설정한다
}

align-items

수직 방향으로 아이템들을 정렬하는 속성

{
.container {
	align-items: stretch;		// 아이템들을 수직 방향으로 늘린다
	align-items: flex-start;	// 시작지점으로 정렬한다
	align-items: flex-end;		// 끝 지점으로 정렬한다
	align-items: center;        // 가운데로 정렬한다
	align-items: baseline;		// 텍스트의 라인(밑줄)을 기준으로 정렬한다
}

align-content

flex-wrap: wrap;이 설정된 상태에서, 아이템들의 행이 2줄 이상 되었을 때의 수직축 방향 정렬을 결정하는 속성

{
.container {
	flex-wrap: wrap;			
	align-content: stretch;				// 아이템들을 수직 방향으로 늘린다
	align-content: flex-start;			// 시작지점으로 정렬
	align-content: flex-end;			// 끝 지점으로 정렬
	align-content: center;				// 가운데로 정렬
	align-content: space-between;		// 아이템 사의 규격을 동일하게 설정
	align-content: space-around;	    // 아이템 둘레 모양을 동일하게 설정
	align-content: space-evenly;		// 아이템들의 사이의 규격과 양 끝부분 규격을 동일하게 설정한다
}