flexbox 2편 몇 가지 관련 속성
flexbox
- justify-content : 주축 배치 방법
- flex-start : 왼쪽 정렬 (기본값)
- center : 가운데 정렬
- flex-end : 오른쪽 정렬
- space-around : 각 요소의 좌우 여백 같게 정렬
- space-between : 요소 간 여백 같게 정렬 - align-items : 교차축 배치 방법
- flex-start : 왼쪽 정렬 (기본값)
- center : 가운데 정렬
- flex-end : 오른쪽 정렬 - align-self : 교차축 개별요소 배치 방법
- flex-start : 왼쪽 정렬 (기본값)
- center : 가운데 정렬
- flex-end : 오른쪽 정렬 - flex-wrap : 줄 바꿈 여부 (item 크기의 합이 container보다 클 경우)
- nowrap : 컨테이너에 맞게 축소 (기본값)
- wrap : 다음 행으로 넘김 (줄 바꿈)
- wrap-reverse : 역방향 wrap
| justify-content | align-items | align-self | flex-wrap | |
|---|---|---|---|---|
| flex-start | 왼쪽 정렬 | 왼쪽 정렬 | 왼쪽 정렬 | X |
| center | 가운데 정렬 | 가운데 정렬 | 가운데 정렬 | X |
| flex-end | 오른쪽 정렬 | 오른쪽 정렬 | 오른쪽 정렬 | X |
| space-around | 각 요소의 좌우 여백 같게 정렬 | X | X | X |
| space-between | 요소 간 여백 같게 정렬 | X | X | X |
| nowrap | X | X | X | 컨테이너에 맞게 축소 |
| wrap | X | X | X | 다음 행으로 넘김 (줄 바꿈) |
| wrap-reverse | X | X | X | 역방향 wrap |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>flexbox 2</title>
<style>
.container{
display: flex;
width: 300px; height: 300px;
border: 2px solid black;
justify-content: space-between;
align-items: center;
}
.item{
width: 60px; height: 60px;
background-color: teal;
}
.self{
align-self: flex-end;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item self">2</div>
<div class="item">3</div>
</div>
</body>
</html>
ISTJ의 재미없는 velog