KokoaTalk Clone Coding: flex box 3
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.
