Display - flex
- div 등의 블럭 속성을 일렬로 배치 가능하도록 조정
- flex와 justify-content 속성을 통해 다양한 배치 구현
* justify-content
space-around
space-evenly
space-between
center
flex-start
flex-end
☆ Code
<!doctype html>
<html>
<head>
<title>Flex Example</title>
<link rel="stylesheet" href="./css/18_style.css">
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="flex-row box-align-1">
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
<div class="flex-row box-align-2">
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
<div class="flex-row box-align-3">
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
<div class="flex-row box-align-c">
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
<div class="flex-row box-align-e">
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</div>
</body>
</html>
.box1 {
width: 200px;
height: 100px;
background-color: rebeccapurple;
margin-left: 10px;
margin-bottom: 20px;
}
.box2 {
width: 200px;
height: 100px;
background-color: chartreuse;
margin-bottom: 20px;
}
.box3, .box4, .box5 {
width: 100px;
height: 100px;
}
.box3 { background-color: green; }
.box4 { background-color: crimson; }
.box5 { background-color: skyblue; }
.flex-row {
display: flex;
margin-bottom: 10px;
}
.box-align-1 {
/* 모든 요소들 사이에 여유 공간을 두고 배치 */
justify-content: space-around;
}
.box-align-2 {
/* 모든 요소들 사이 거리를 동일하게 배치 */
justify-content: space-evenly;
}
.box-align-3 {
/* 맨 왼쪽, 오른쪽 여백은 없이 요소간 동일하게 배치 */
justify-content: space-between;
}
.box-align-c {
/* 중앙 정렬 */
justify-content: center;
}
.box-align-e {
/* 오른쪽 정렬 */
justify-content: end;
}'CSS' 카테고리의 다른 글
| CSS 디스플레이 포지션 (0) | 2024.11.25 |
|---|---|
| CSS 외부 폰트 사용하기 (0) | 2024.11.25 |