위치 정렬 - flex container: 정렬1

이번에는 정렬과 관련된 프로퍼티 순서이다. 가장 먼저 살펴볼 프로퍼티는 justify-content이다. 

justify-content는 flex-direction으로 정해진 방향에 flex item들을 어떻게 정렬할 것인지 정한다. 

 

 

flex-start, center, flex-end

---

<h3>flex-direction: row (가로 방향)</h3>
<div class="wrapper-row">
	justify-content: flex-start
	<div class="container row start">
		<div class="item box">1</div>
		<div class="item box">2</div>
		<div class="item box">3</div>
	</div>
</div>
<div class="wrapper-row">
	justify-content: center
	<div class="container row center">
		<div class="item box">1</div>
		<div class="item box">2</div>
		<div class="item box">3</div>
	</div>
</div>
<div class="wrapper-row">
	justify-content: flex-end
	<div class="container row end">
		<div class="item box">1</div>
		<div class="item box">2</div>
		<div class="item box">3</div>
	</div>
</div>
<h3>flex-direction: column (세로 방향)</h3>
<div class="wrapper-column">
	<div>
		<div>justify-content: flex-start</div>
		<div class="container column start">
			<div class="item box">1</div>
			<div class="item box">2</div>
			<div class="item box">3</div>
		</div>
	</div>
	<div>
		<div>justify-content: center</div>
		<div class="container column center">
			<div class="item box">1</div>
			<div class="item box">2</div>
			<div class="item box">3</div>
		</div>
	</div>
	<div>
		<div>justify-content: flex-end</div>
		<div class="container column end">	
			<div class="item box">1</div>
			<div class="item box">2</div>
			<div class="item box">3</div>
		</div>
	</div>
</div>

.box {
	width: 48px;
	height: 48px;
	background-color: #fff;
	border: 4px solid pink;
	text-align: center;
	box-sizing: border-box;
	padding: 8px;
}
.wrapper-row {
	display: flex;
	margin-bottom: 10px;
}
.wrapper-column {
	display: flex;
	justify-content: space-between;
}

.container {
	display: flex;
}
.row {
	background-color: skyblue;
	flex-direction: row;
	width: 300px;
}
.column {
	background-color: lemonchiffon;
	margin-right: 24px;
	flex-direction: column;
	width: 50px;
	height: 400px;
}
.start {
	justify-content: flex-start;
}
.center {
	justify-content: center;
}
.end { 
	justify-content: flex-end;
}

 

 

space-between, space-around

---

<h3>flex-direction: row (가로 방향)</h3>
<div class="wrapper-row">
	justify-content: flex-start
	<div class="container row start">
		<div class="item box">1</div>
		<div class="item box">2</div>
		<div class="item box">3</div>
	</div>
</div>
<div class="wrapper-row">
	justify-content: center
	<div class="container row center">
		<div class="item box">1</div>
		<div class="item box">2</div>
		<div class="item box">3</div>
	</div>
</div>
<div class="wrapper-row">
	justify-content: flex-end
	<div class="container row end">
		<div class="item box">1</div>
		<div class="item box">2</div>
		<div class="item box">3</div>
	</div>
</div>
<div class="wrapper-row">
	justify-content: space-between
	<div class="container row between">
		<div class="item box">1</div>
		<div class="item box">2</div>
		<div class="item box">3</div>
	</div>
</div>
<div class="wrapper-row">
	justify-content: space-around
	<div class="container row around">
		<div class="item box">1</div>
		<div class="item box">2</div>
		<div class="item box">3</div>
	</div>
</div>
<h3>flex-direction: column (세로 방향)</h3>
<div class="wrapper-column">
	<div>
		<div>justify-content: flex-start</div>
		<div class="container column start">
			<div class="item box">1</div>
			<div class="item box">2</div>
			<div class="item box">3</div>
		</div>
	</div>
	<div>
		<div>justify-content: center</div>
		<div class="container column center">
			<div class="item box">1</div>
			<div class="item box">2</div>
			<div class="item box">3</div>
		</div>
	</div>
	<div>
		<div>justify-content: flex-end</div>
		<div class="container column end">	
			<div class="item box">1</div>
			<div class="item box">2</div>
			<div class="item box">3</div>
		</div>
	</div>
	<div>
		<div>justify-content: space-between</div>
		<div class="container column between">
			<div class="item box">1</div>
			<div class="item box">2</div>
			<div class="item box">3</div>
		</div>
	</div>
	<div>
		<div>justify-content: space-around</div>
		<div class="container column around">
			<div class="item box">1</div>
			<div class="item box">2</div>
			<div class="item box">3</div>
		</div>
	</div>
</div>

.box {
	width: 48px;
	height: 48px;
	background-color: #fff;
	border: 4px solid pink;
	text-align: center;
	box-sizing: border-box;
	padding: 8px;
}
.wrapper-row {
	display: flex;
	margin-bottom: 10px;
}
.wrapper-column {
	display: flex;
	justify-content: space-between;
}

.container {
	display: flex;
}
.row {
	background-color: skyblue;
	flex-direction: row;
	width: 300px;
}
.column {
	background-color: lemonchiffon;
	margin-right: 24px;
	flex-direction: column;
	width: 50px;
	height: 400px;
}

.start {
	justify-content: flex-start;
}
.center {
	justify-content: center;
}
.end { 
	justify-content: flex-end;
}
.between { 
	justify-content: space-between
}
.around { 
	justify-content: space-around;
}