css flex-wrap 속성은 주축의 방향에 따라서 교차 축을 기준으로 요소들을 정렬하는 방법입니다. 주축의 방향은 flex-direction 속성으로 변경할 수 있습니다.
주축(MAIN AXIS)이 기본적으로 가로방향이고 교차 축(CROSS AXIS)이 세로방향입니다. 주축을 세로 방향으로 변경하면 교차축이 가로 방향으로 되고 주축을 가로 방향으로 변경하면 교차 축이 세로 방향이 됩니다.
주축 가로 방향 교차 축 세로 방향
<!DOCTYPE html>
<html lang="en">
<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>
<style>
#container {
background-color: bisque;
display: flex;
height: 600px;
flex-direction: row;
justify-content: flex-start;
flex-wrap: wrap;
}
#container div {
width: 100px;
height: 100px;
}
.one {
background-color: red;
}
.two {
background-color: green;
}
.three {
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
요소들을 열 방향으로 정렬시켜 줍니다.
주축 세로 방향 교차 축 가로 방향
<!DOCTYPE html>
<html lang="en">
<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>
<style>
#container {
background-color: bisque;
display: flex;
height: 600px;
flex-direction: column;
justify-content: flex-start;
flex-wrap: wrap;
}
#container div {
width: 100px;
height: 100px;
}
.one {
background-color: red;
}
.two {
background-color: green;
}
.three {
background-color: blue;
}
</style>
</head>
<body>
<div id="container">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</div>
</body>
</html>
요소들을 행 방향으로 정렬시켜 줍니다.
마무리
justify-content 값에 따라서 다양하게 정렬할 수 있고 wrap-reverse를 주면 반대방향으로 정렬이 됩니다.
'IT > css' 카테고리의 다른 글
align-content & align-self 속성 (0) | 2023.03.26 |
---|---|
css align-items 속성 (0) | 2023.03.25 |
css justify-content 속성 (0) | 2023.03.24 |
css flex-direction 속성 (0) | 2023.03.24 |
css 투명도 조절하는 방법 - rgba, opacity (0) | 2023.03.23 |
댓글