what is flex box and its all properties
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex here</title>
<style>
*{
margin: 0;
padding: 0;
}
.parent{
min-height: 100vh;
width: 100vw;
background-color: blue;
display: flex;
padding: 30px 0px;
/* justify-content: space-evenly; 6 */
/* align-items: start; 3 */
/* flex-wrap: wrap-reverse; */
flex-wrap: wrap;
/* align-content: start; , center , end 3 */
/* flex-flow: row-reverse; */
/* align-content: space-between; 3 */
/* align-content: space-evenly; */
/* justify-content: space-evenly; */
/* flex-direction: column; */
/* align-items: center; */
/* align-self: end; for single box to move everywhere*/
}
.child{
border: 2px solid red;
height: 20vh;
width: 300px;
}
.a{
background-color: black;
order: -1;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
<div class="child">3</div>
<div class="child a">4</div>
</div>
</body>
</html>
Comments
Post a Comment