[CSS] css의 flex 정렬
2024. 1. 27. 19:20ㆍFE/CSS
728x90
html의 태그를 이용하여 정렬을 할 때, 기본적인 방향은 가로 방향입니다. 하지만, css의 옵션으로 "flex"를 주게되면, 정렬 방향이 세로 방향으로 바뀌게 됩니다. "flex-direction" 인자를 통해서 원래 방향인 세로 방향으로 정렬되도록 변경할 수도 있습니다.
한편, css에서 "justify-content"라는 인자와 "align-items"인자가 있는데, "justify-content"라는 인자는 주축(flex)에 대해 어떻게 정렬할 지 선택하는 인자이고, "align-items"는 주축이 아닌 축에 대해 어떻게 정렬할 지 선택하는 인자입니다. 위의 글을 정리한 그림과 코드는 아래와 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
background-color: rgb(216, 216, 219);
margin: 10px;
padding: 7px;
height: 50vh;
/* 가로, 세로 가운데 배치 */
display: flex;
justify-content: center;
align-items: center;
}
.box {
background-color: purple;
color: white;
margin: 5px;
padding: 10px;
border-radius: 5px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<span>text</span>
<span>text</span>
<span>text</span>
</div>
</body>
</html>'FE > CSS' 카테고리의 다른 글
| [CSS] margin과 padding (0) | 2024.01.27 |
|---|---|
| [CSS] css의 선택자 (0) | 2024.01.27 |