flexbox 2편, 몇 가지 관련 속성

flexbox 다루기

flexbox를 다루기 위해 다음과 같은 속성들을 사용할 수 있다.

주축 배치 방법 : justify-content
교차축 배치 방법 : align-items
교차축 개별요소 배치 방법 : align-self
줄 바꿈 여부 : flex-wrap

justify-content

.container {
	justify-content: flex-start;
}

.container {
	justify-content: center;
}

.container {
	justify-content: space-between;
}

.container {
	justify-content: space-around;
}

align-items

.container {
	justify-content: space-between;
	align-items: flex-end;
}

align-self

.container {
	justify-content: space-between;
	align-items: center;
}
.self {
	align-self: flex-start;
}

flex-wrap 적용 X

.container {
	display: flex;
	width: 300px; height: 300px;
	border: 2px solid black;
}
.item {
	width: 120px; height: 120px;
	background: mediumturquoise;
}

flex-wrap 적용 O

.container {
	display: flex;
	width: 300px; height: 300px;
	border: 2px solid black;
	flex-wrap : wrap;
}
.item {
	width: 120px; height: 120px;
	background: mediumturquoise;
}

학습한 인프런 강의