CSS - display: flex

부모 요소인 Flex Container와 자식 요소인 Flex Item

Flxe 기능의 영향을 받는 전체 공간은 부모 요소인 Container

설정된 Flex 속성에 따라 Container 속 자식 요소인 Item들이 여러 형태로 배치

 

 

* 배치 방향 속성 _ flex-direction

.container {
	flex-direction: row;
	/* flex-direction: column; */
	/* flex-direction: row-reverse; */
	/* flex-direction: column-reverse; */
}

 

 

* 정렬 속성

메인축 방향 설정 

justify-content

.container {
	justify-content: center;
   	/* justify-content: flex-start; */
	/* justify-content: flex-end; */
	/* justify-content: space-between; */
	/* justify-content: space-around; */
	/* justify-content: space-evenly; */
}

 

수직축 방향 설정

align-items

.container {
	align-items: center;
	/* align-items: flex-start; */
	/* align-items: flex-end; */
	/* align-items: stretch; */
	/* align-items: baseline; */
}

align-items: stretch;

align-items: baseline;

 

 

 

 

출처 https://studiomeal.com/archives/197