Basically, justify-content move on to main axis, align-items move on to cross axis.
But you can convert both of them.
flex-direction: column -> main axis become vertical, cross axis become horizontal.
<head>
<style>
body {
height: 100vh;
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
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>
body {
height: 100vh;
margin: 20px;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
And I am going to write the number in the boxes.
<head>
<style>
body {
height: 100vh;
margin: 20px;
display:flex;
justify-content: space-between;
align-items: center;
}
div {
width: 50px;
height: 50px;
color: white;
font-size: 30px;
}
.first {
background-color: royalblue;
}
.second {
background-color: wheat;
}
.last {
background-color: mediumpurple;
}
</style>
</head>
<body>
<div class="first">1</div>
<div class="second">2</div>
<div class="last">3</div>
</body>
div {
width: 50px;
height: 50px;
color: white;
font-size: 30px;
display:flex; you have to write this, or it doesn't work next to this
justify-content: center;
align-items: center;
}
'HTML CSS' 카테고리의 다른 글
| KokoaTalk Clone Coding: fixed (0) | 2021.05.04 |
|---|---|
| KokoaTalk Clone Coding: flex box 3 (0) | 2021.05.03 |
| KokoaTalk Clone Coding: flex box 1 (0) | 2021.05.03 |
| KokoaTalk Clone Coding: classes (0) | 2021.05.03 |
| KokoaTalk Clone Coding: margin, padding (0) | 2021.05.03 |
