728x90
SMALL
.flex-container{
display: flex;
flex-direction: column-reverse;
width: 100%;
height: 100vh;
background-color: #127cc1;
}
column쓰면 세로로
row쓰면 옆으로
<!DOCTYPE html>
<html>
<head>
<title>20201111 실습</title>
<style>
html, body{
padding: 0;
margin: 0;
}
.flex-container{
display: flex;
flex-direction: column;
flex-wrap: wrap;
width: 100%;
height: 100vh;
background-color: #127cc1;
}
.flex-item{
width: 100px;
height: 100px;
box-sizing: border-box;
border: 1px solid black;
align-content: center;
}
.item1{
background-color: #d0cfec;
}
.item2{
background-color: #6a8e7f;
}
.item3{
background-color: burlywood;
}
.item4{
background-color: darkcyan;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="flex-item item1">1</div>
<div class="flex-item item2">2</div>
<div class="flex-item item3">3</div>
<div class="flex-item item4">4</div>
</div>
</body>
</html>
728x90
LIST
'Front > Html, css,jsp' 카테고리의 다른 글
| 20201118 newneek회원가입창 따라만들어보기 (0) | 2020.11.18 |
|---|---|
| 20201116_36 박스움직이기, 순회하며 수정 (0) | 2020.11.16 |
| 20201111_34 레이아웃 실습 (0) | 2020.11.11 |
| 20201111_ 34 사각형 (0) | 2020.11.11 |
| 20201110_33 server... (0) | 2020.11.10 |
댓글