Flexbox Froggy
A game for learning CSS flexbox
flexboxfroggy.com
It helps understanding about flex box.
more property of flex box
<head>
<style>
body {
height: 100vh;
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap; default
}
div {
width: 50px;
height: 50px;
}
.first {
background-color: royalblue;
}
.second {
background-color: wheat;
}
.last {
background-color: mediumpurple;
}
</style>
</head>
<body>
<div class="first"></div>
<div class="second"></div>
<div class="last"></div>
</body>
Even though the div has the width, wrapping happens when the browser getting small.
body {
height: 100vh;
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
}
Then it respect div's width.
'HTML CSS' 카테고리의 다른 글
| KokoaTalk Clone Coding: relative, absolute (0) | 2021.05.04 |
|---|---|
| KokoaTalk Clone Coding: fixed (0) | 2021.05.04 |
| KokoaTalk Clone Coding: flex box 2 (0) | 2021.05.03 |
| KokoaTalk Clone Coding: flex box 1 (0) | 2021.05.03 |
| KokoaTalk Clone Coding: classes (0) | 2021.05.03 |
