div Horizontal or Vertical alignment
You can set the direction of flex items in horizontal direction and vertical direction by using Flex
<![CDATA[
.flowH{
display: flex;
flex-direction: row;
}
.flowHR{
display: flex;
flex-direction: row-reverse;
}
.flowV{
display: flex;
flex-direction: column;
}
.flowVR{
display: flex;
flex-direction: column-reverse;
}
]]>
<![CDATA[<!--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">
<title>Flex</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- Custom CSS-->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container ">
<h1>Horizontal Flow</h1>
<div class="row text-center flowH">
<div class="col-md-4">
<p class="bg-success text-white m-1 p-2"> Horizontal flow1</p>
</div>
<div class="col-md-4">
<p class="bg-success text-white m-1 p-2"> Horizontal flow2</p>
</div>
<div class="col-md-4">
<p class="bg-success text-white m-1 p-2"> Horizontal flow3</p>
</div>
</div><br/>
<h1>Horizontal Flow Reverse</h1>
<div class="row text-center flowHR ">
<div class="col-md-4">
<p class="bg-success text-white m-1 p-2"> Horizontal flow1</p>
</div>
<div class="col-md-4">
<p class="bg-success text-white m-1 p-2"> Horizontal flow2</p>
</div>
<div class="col-md-4">
<p class="bg-success text-white m-1 p-2"> Horizontal flow3</p>
</div>
</div><br/>
<h1>Vertical Flow</h1>
<div class="row text-center flowV">
<div class="col-md-4">
<p class="bg-success text-white m-1 p-2"> Horizontal flow1</p>
</div>
<div class="col-md-4">
<p class="bg-success text-white m-1 p-2"> Horizontal flow2</p>
</div>
<div class="col-md-4">
<p class="bg-success text-white m-1 p-2"> Horizontal flow3</p>
</div>
</div><br/>
<h1>Vertical Flow Reverse</h1>
<div class="row text-center flowVR">
<div class="col-md-4">
<p class="bg-success text-white m-1 p-2"> Horizontal flow1</p>
</div>
<div class="col-md-4">
<p class="bg-success text-white m-1 p-2"> Horizontal flow2</p>
</div>
<div class="col-md-4">
<p class="bg-success text-white m-1 p-2"> Horizontal flow3</p>
</div>
</div>
</div>
</body>
</html> ]]>
<![CDATA[ .flowH{
display: flex;
flex-direction: row;
}
.flowHR{
display: flex;
flex-direction: row-reverse;
}
.flowV{
display: flex;
flex-direction: column;
}
.flowVR{
display: flex;
flex-direction: column-reverse;
} ]]>
No comments:
Post a Comment