Display: flex
Flex-direction: row | row-reverse | column | column-reverse
align-self: flex-start | flex-end | center | baseline | stretch
justify-content: start | center | space-between | space-around | space-evenly.flex-container {
display: flex;
}<!--basic--flex--layout-->
<html>
<head>
<style>
.parent{
display: flex or inline-flex;
flex-direction: row or column;
flex-wrap: wrap or wrap-reverse;
}
</style>
</head>
<body>
<div class="parent">
<div class="child-1"></div>
.
.
.
</div>
</body>
</html> <style>
.container {
display: flex;
flex-direction: row;
column-gap: 2rem;
}
.box {
background: yellow;
width: 6rem;
height: 6rem;
}
</style>
<div class="container">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
</div>
Display: flex
Flex-direction: row | row-reverse | column | column-reverse
align-self: flex-start | flex-end | center | baseline | stretch
justify-content: start | center | space-between | space-around | space-evenly
flex-box by order
.item {
order: 5; /* default is 0 */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.first,.second, .third, .Fourth{
width: 100px;
height: 50px;
background-color: blueviolet;
border-radius: 25px;
box-shadow: 5px 5px 7px rgb(70, 70, 70);
text-align: center;
text-transform: capitalize;
color: white;
font-family: cursive;
padding: 10px;
margin: 10px;
}
.flexbox{
display: flex;
flex-wrap: wrap;
justify-content: center;
}
</style>
<title>node mon</title>
</head>
<body>
<div class="flexbox">
<div class="first">first</div>
<div class="second">second</div>
<div class="third">third</div>
<div class="Fourth">Fourth</div>
</div>
</body>
</html>