HTML (기본으로만 구성)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<div class="container">
<div class="item item1">1</div>
<div class="item item2">2</div>
<div class="item item3">3</div>
<div class="item item4">4</div>
<div class="item item5">5</div>
</div>
</body>
</html>
- 컨테이너 속성으로 배경색과 높이만 지정하고 각각의 개별 아이템들을 구분하기 위해 색상 부여
//컨테이너
.container {
background: green;
height: 100vh;
}
//아이템 공통 속성
.item {
width: 40px;
height: 40px;
}
//개별 아이템 속성(1,2,3,4,5)
.item1 {
background: #ef9a9a;
}
.item2 {
background: #f48fb1;
}
.item3 {
background: #ce93d8;
}
.item4 {
background: #b39ddb;
}
.item5 {
background: #90caf9;
}
.container에 display: flex; 속성
flex-direction: row; 또는 column; 에 따라 가로 정렬 및 세로 정렬
flex-direction: row-reverse;
정렬 축을 뒤집는다 (아이템의 순서까지 모두 거꾸로 바뀐다) / coulmn 에서도 사용 가능
flex-wrap: nowrap; flex-wrap: wrap;
nowrap - 화면 크기에 따라 요소의 크기가 작아지더라도 기존 정렬을 유지
wrap - 화면 크기가 줄어들면 나머지 요소가 아래로 내려가 떨어진다
justify-content: center; justify-content: end;
가운데 정렬 또는 왼쪽부터 정렬이 가능한데
flex-direction: row-reverse; 와 다른 점은 아이템의 순서가 바뀌지 않는다는 것
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;
아이템들간 간격 조정 (속성이 조금씩 다르니 필요에 따라 사용하면 될 것)
align-items: center;
수직 축 기준으로 가운데 또는 상하 정렬
align-items: space-between;
수직 축을 기준으로 아이템들 수직 간격 맞춰서 정렬시킴
