HTML, CSS/Function implementation
[Visual Studio Code] flex-direction
zenghyun
2022. 11. 1. 23:47
CSS에서
flex-direction 기능을 사용해보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../style/reset.css">
<link rel="stylesheet" href="../style/box.css">
<style>
/*
가로, 세로 나란히 배치
가로 가운데, 세로 가운데 배치
container : flex레이아웃의 부모
width: 100%; height:100vh;
justify-content: 주축에 대한 정렬방식
align_items: 보조축(cross axis)의 정렬
flex-direction: row : 주축을 변경
item : flex레이아웃의 자식
% 부모너비에 비례
margin 세로의 % 부모의 가로 %
*/
.container {width:100%; height: 100vh;
background-color: pink;
display: flex;
justify-content: center;
/* space-between: item사이 간격을 동일하게 맞춤 */
/* space-evenly: item마다 좌우의 간격이 같음 */
/* space-around: item마다 좌우의 간격이 같음 evenly에 비해 안쪽 간격이 2배*/
/* center: 가로 가운데 배치 */
align-items: center;
/* align-items: center까지 같이하면 가로 세로 가운데 */
}
.item { width: 100px; height: 50px;
background-color: skyblue;
border: 1px solid blue;
}
.container:nth-of-type(1) {flex-direction: row;}
.container:nth-of-type(2) {flex-direction: row-reverse;}
.container:nth-of-type(3) {flex-direction: column;}
.container:nth-of-type(4) {flex-direction:column-reverse; }
.container:nth-of-type(5) {flex-direction:column; justify-content: flex-start; align-items: flex-start;}
.container:nth-of-type(6) {flex-direction:column; justify-content: flex-end; align-items: flex-end;}
</style>
</head>
<body>
<h1>flex-direction: row</h1>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
</div>
<h1>flex-direction: row-reverse</h1>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
</div>
<h1>flex-direction: column</h1>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
</div>
<h1>flex-direction:column-reverse</h1>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
</div>
<h1>column 상태에서 justify-content:flex-start</h1>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
</div>
<h1>column 상태에서 justify-content:flex-end</h1>
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
<div class="item">item3</div>
<div class="item">item4</div>
<div class="item">item5</div>
</div>
</body>
</html>
|
flex-direction: row
|
item 가로배치 / 1부터 5까지 순서대로 나옴 |
|
flex-direction: row-reverse
|
item 가로배치 / 5부터 1까지 역순으로 나옴 |
|
flex-direction: column
|
item 세로배치 / 1부터 5까지 순서대로 나옴 |
|
flex-direction:column-reverse
|
item 세로배치 / 5부터 1까지 역순으로 나옴 |
|
flex-direction:column;
justify-content: flex-start; align-items: flex-start;
|
item 세로배치 / 시작부분에 붙어서 나옴 |
|
flex-direction:column; justify-content: flex-end; align-items: flex-end;
|
item 세로배치 / 끝부분에 붙어서 나옴 |
http://flex-direction.netlify.app
Document
flex-direction.netlify.app