KokoaTalk Clone Coding: flex box 1
<head>
<style>
body {
margin: 20px;
}
div {
width: 50px;
height: 50px;
background-color: royalblue;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
I want to change this block to inline.
div {
display: inline-block;
width: 50px;
height: 50px;
background-color: royalblue;
}
But I don't want the spaces between the blocks, inline-block doesn't support responsive design.
<head>
<style>
body {
display: flex;
margin: 20px;
}
div {
width: 50px;
height: 50px;
background-color: royalblue;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
flexbox
Rule 1. You make the father of div(body) the flex. body control of its children.
main axis: justify-content(horizontal-default)
cross axis: align-items(vertical-default)
Rule 2. If you want to work both of them, you need to write 'display: flex' first.
body {
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
I am going to make bigger the body's vh(viewport height). The viewport is the screen.
body {
height: 100vh; it means 100% of the screen
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
