flexbox 1편 정의 및 사용 방법
flexbox
- 박스 내 요소 간 공간 배분과 정렬 기능을 제공하는 1차원 레이아웃 모델
- 주축 : 정방향
- 교차축 : 역방향 (주축과 직교)
- flex 컨테이너를 만들기 위해 컨테이너에 display: flex; 적용 - flex-direction : 주축 및 진행 방향 설정
| 속성값 | 주축 | 콘텐츠 방향 |
|---|---|---|
| row (기본) | 행 | 동일 |
| row-reverse | 행 | 반대 |
| column | 열 | 동일 |
| column-reverse | 열 | 반대 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flexbox</title>
<style>
.container{
display: flex;
flex-direction: column-reverse;
}
.item{
width: 80px; height: 80px;
background-color: orange;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
</body>
</html>
ISTJ의 재미없는 velog