justify-content 속성이란

justify-content 속성은 Flex 컨테이너 내에서 주 축(main axis)을 따라 아이템들을 정렬하는 방법을 정의한다.

  • flex-start: 아이템들을 주 축의 시작 부분에 정렬한다 (기본값).
  • flex-end: 아이템들을 주 축의 끝 부분에 정렬한다
  • center: 아이템들을 주 축의 가운데에 정렬한다
  • space-between: 첫 번째 아이템은 시작 부분에, 마지막 아이템은 끝 부분에 정렬하고, 나머지 아이템들은 사이에 고르게 분포시킨다
  • space-around: 아이템들 주위에 고르게 여백을 분포시킨다 아이템 간의 여백은 동일하지만, 첫 번째 아이템과 마지막 아이템의 바깥 여백은 내부 여백의 절반이다
  • space-evenly: 모든 아이템들을 사이의 여백과 아이템 바깥의 여백이 동일하게 분포되도록 정렬한다

 

1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.container {
		display: flex;
		border: 2px solid #333;
		margin-bottom: 20px;
		padding: 10px;
	}
	
	.box {
		background-color: #007bff;
		color: white;
		padding: 20px;
		margin: 10px;
		text-align: center;
		border-radius: 5px;
		width: 150px;
	}
	
</style>
</head>
<body>
	<h2>flex-wrap:nowrap(기본값)</h2>
	<div class="container" style="flex-wrap: nowrap;">
		<div class="box">아이템1</div>
		<div class="box">아이템2</div>
		<div class="box">아이템3</div>
		<div class="box">아이템4</div>
		<div class="box">아이템5</div>
		<div class="box">아이템6</div>
		<div class="box">아이템7</div>
	</div>
	
		<h2>flex-wrap:nowrap</h2>
	<div class="container" style="flex-wrap: wrap;">
		<div class="box">아이템1</div>
		<div class="box">아이템2</div>
		<div class="box">아이템3</div>
		<div class="box">아이템4</div>
		<div class="box">아이템5</div>
		<div class="box">아이템6</div>
		<div class="box">아이템7</div>
	</div>
	
		<h2>flex-wrap:nowrap-reverse(기본값)</h2>
	<div class="container" style="flex-wrap: wrap-reverse;">
		<div class="box">아이템1</div>
		<div class="box">아이템2</div>
		<div class="box">아이템3</div>
		<div class="box">아이템4</div>
		<div class="box">아이템5</div>
		<div class="box">아이템6</div>
		<div class="box">아이템7</div>
	</div>
	
</body>
</html>

 

 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
	.container {
		display: flex;
		border: 2px solid #333;
		margin-bottom: 20px;
		padding: 10px;
		flex-direction: row;
	}
	
	.item {
		background-color: #007bff;
		color: white;
		padding: 20px;
		margin: 10px;
		text-align: center;
		border-radius: 5px;
		width: 150px;
	}

</style>
</head>
<body>
	<h2>justify-content: flex-start(기본값)</h2>
	<div class="container" style="justify-content: flex-start;">
		<div class="item">아이템1</div>
		<div class="item">아이템2</div>
		<div class="item">아이템3</div>
	</div>
	
		<h2>justify-content: flex-end</h2>
	<div class="container" style="justify-content: flex-end;">
		<div class="item">아이템1</div>
		<div class="item">아이템2</div>
		<div class="item">아이템3</div>
	</div>
	
		<h2>justify-content: flex-center</h2>
	<div class="container" style="justify-content: center;">
		<div class="item">아이템1</div>
		<div class="item">아이템2</div>
		<div class="item">아이템3</div>
	</div>
	
	
		<h2>justify-content: space-between</h2>
	<div class="container" style="justify-content:  space-between;">
		<div class="item">아이템1</div>
		<div class="item">아이템2</div>
		<div class="item">아이템3</div>
		<div class="item">아이템4</div>
	</div>
	
	
		<h2>justify-content: space-around</h2>
	<div class="container" style="justify-content:  space-around;">
		<div class="item">아이템1</div>
		<div class="item">아이템2</div>
		<div class="item">아이템3</div>
		<div class="item">아이템4</div>
	</div>
	
		<h2>justify-content: space-evenly</h2>
	<div class="container" style="justify-content:  space-evenly;">
		<div class="item">아이템1</div>
		<div class="item">아이템2</div>
		<div class="item">아이템3</div>
		<div class="item">아이템4</div>
	</div>
	
</body>
</html>

'CSS' 카테고리의 다른 글

[CSS] FlexItem의 세밀한 제어 flex 속성  (0) 2024.07.04
[CSS] 교차축 정렬에는 align-items와 align-content 이다.  (0) 2024.07.04
[CSS] flex-wrap 이해하기  (0) 2024.07.04
css 공부  (0) 2024.07.02
[CSS] flex-direction 속성이란?  (0) 2024.07.01

티스토리툴바