#3.11 Flexbox Part Two이전 포스트/코코아 html css2020. 12. 7. 20:11
Table of Contents
<!DOCTYPE html>
<html lang="kr">
<head>
<title>title</title>
<style>
body {
background-color: aqua;
height: 100vh;
display: flex;
flex-direction: column-reverse;
justify-content: space-between;
align-items: center;
}
div {
display: flex;
justify-content: center;
align-items: center;
background-color: tomato;
width: 150px;
height: 150px;
font-size: 20px;
}
.sky-color {
background-color: blue;
}
</style>
</head>
<body>
<div>1</div>
<div class="sky-color">2</div>
<div>3</div>
</body>
</html>
<body> 와 <div>가 부모자식관계인데 div또한 부모가 되어 자식요소에도 flex를 적용할 수 있다.
flex-direction을 column으로 하면 main-axis랑 cross-axis가 서로 바뀜
column-reverse하면 박스가 오는위치가 거꾸로 가됨.
<!DOCTYPE html>
<html lang="kr">
<head>
<title>title</title>
<style>
body {
background-color: aqua;
height: 100vh;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
div {
display: flex;
justify-content: center;
align-items: center;
background-color: tomato;
width: 150px;
height: 150px;
font-size: 20px;
}
.sky-color {
background-color: blue;
}
</style>
</head>
<body>
<div>1</div>
<div class="sky-color">2</div>
<div>3</div>
</body>
</html>
원래 아무것도 지정안하면 화면을 줄였을때 박스들이 찌글어졌는데 flex-wrap: nowrap을 하면 박스들이 찌글어
지지않고 다른줄로 넘어간다.
flex-wrap: nowrap-reverse하면 박스가 내려가는 순서가 거꾸로 된다.
'이전 포스트 > 코코아 html css' 카테고리의 다른 글
| #3.13 Relative Absolute (0) | 2020.12.10 |
|---|---|
| #3.12 Fixed (0) | 2020.12.07 |
| #3.10 Flexbox Part One (0) | 2020.12.07 |
| #3.9 Inline Block (0) | 2020.12.06 |
| #3.8 Classes (0) | 2020.12.06 |
@병고라니 :: 컴퓨터공학과 고인물
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!