flex 기본
- 바깥족에 있는 컨테이너에 display 값을 flex로 줘야하고, flex-direction을 따로 지정하지 않으면 row와 같다.
- colum으로 바꾸면 수직 방향으로 각각의 태그들이 정렬된다.
- 기본적으로 flex 각각의 태그는 그 방향의 화면 전체를 차지한다.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: powderblue;
height: 200px;
display: flex;
flex-direction: column-reverse;
/* row가 기본값, 행의 방향으로 정렬 */
}
.item {
background-color: tomato;
color: white;
border: 1px solid white;
}
</style>
</head>
<body>
<!-- 자식과 부모가 있어야한다. -->
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<!-- div 태그는 화면 전체를 다 사용하기 때문에 한줄로 표현된다. -->
</div>
</body>
</html>
'html & css > 개념' 카테고리의 다른 글
| flex - holy grail layout (1) | 2023.11.24 |
|---|---|
| flex - grow & shrink (1) | 2023.11.24 |
| flex 소개 (1) | 2023.11.24 |
| 포지션 (position) (1) | 2023.11.22 |
| 마진 겹침 (margin-collapsing) (0) | 2023.11.22 |
