CSS flex-direction Property

CSS flex-direction Property


CSS flex-direction Property
 
In this tutorial, you will learn about CSS flex-direction Property wi the help of example:-So the below image represents the elements in a flexbox in different directions - 

 
 
A flex container has a direction, defined by the flex-direction property. 
 
It can be either a row (horizontal) or column (vertical). 
 
This will be shown in the image below .
 
There are actually four values for the flex-direction property: row, row-reverse, column, and column reverse. The meaning of row/column, and row-reverse/column-reverse depends on whether the system is using a left-to-right (LTR) language or a right-to-left (RTL) language. 
 
The following sections assume an LTR language; for an RTL language, they are reversed. 
 
A flex container is created by setting an element’s display property to the value flex. 
 
This will create a block flex container. You can also create an inline flex container by setting display to inline-flex.
 
Syntax -
 
flex-direction: row|row-reverse|column|column-reverse|initial
 
Now we will see Example -
 
Example 1 - Simple direction row -
 
<style>
.container {
display: flex;
flex-direction: row;
border: 1px solid black;
}
.item,
.item2,
.item3 {
background: rebeccapurple;
font-size: 3rem;
padding: 2rem;
color: white;
}
.item2 {
background: skyblue;
}
.item3 {
background: orangered;
}
</style>
<div class="container">
<div class="item">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
</div>
 
Output - 
 
 
Example 2 - Responsive Image Gallery:- Resize the browser window to see the responsive effect.
<!DOCTYPE html>
<html>
<style>

</style>
<body>
<link rel="stylesheet" href="sample.css">
<div class="header">
  <h1>Responsive Image Gallery</h1>
  <p>Resize the browser window to see the responsive effect.</p>
</div>
<div class="row">
  <div class="columns">
    <img src="image1.jpg" style="width:100%">
    <img src="image2.png" style="width:100%">
    <img src="krishnaimage.jpg" style="width:100%">
    <img src="image1.jpg" style="width:100%">
    <img src="image3.png" style="width:100%">
    <img src="krishnaimage.jpg" style="width:100%">
    <img src="image1.jpg" style="width:100%">
  </div>
  <div class="columns">
    <img src="image1.jpg" style="width:100%">
    <img src="image2.png" style="width:100%">
    <img src="image1.jpg" style="width:100%">
    <img src="image2.png" style="width:100%">
    <img src="krishnaimage.jpg" style="width:100%">
    <img src="image1.jpg" style="width:100%">
    <img src="image3.png" style="width:100%">
  </div>
  <div class="columns">
    <img src="image1.jpg" style="width:100%">
    <img src="image2.png" style="width:100%">
    <img src="krishnaimage.jpg" style="width:100%">
    <img src="image1.jpg" style="width:100%">
    <img src="image3.png" style="width:100%">
    <img src="krishnaimage.jpg" style="width:100%">
    <img src="image1.jpg" style="width:100%">
  </div>
  <div class="columns">
    <img src="image1.jpg" style="width:100%">
    <img src="image2.png" style="width:100%">
    <img src="krishnaimage.jpg" style="width:100%">
    <img src="image1.jpg" style="width:100%">
    <img src="image3.png" style="width:100%">
    <img src="krishnaimage.jpg" style="width:100%">
    <img src="image1.jpg" style="width:100%">
  </div>
  <div class="columns">
    <img src="image1.jpg" style="width:100%">
    <img src="image2.png" style="width:100%">
    <img src="krishnaimage.jpg" style="width:100%">
    <img src="image1.jpg" style="width:100%">
    <img src="image3.png" style="width:100%">
    <img src="krishnaimage.jpg" style="width:100%">
    <img src="image1.jpg" style="width:100%">
  </div>
  <div class="columns">
    <img src="image1.jpg" style="width:100%">
    <img src="image2.png" style="width:100%">
    <img src="krishnaimage.jpg" style="width:100%">
    <img src="image1.jpg" style="width:100%">
    <img src="image3.png" style="width:100%">
    <img src="krishnaimage.jpg" style="width:100%">
    <img src="image1.jpg" style="width:100%">
  </div>
  <div class="columns">
    <img src="image1.jpg" style="width:100%">
    <img src="image2.png" style="width:100%">
    <img src="krishnaimage.jpg" style="width:100%">
    <img src="image1.jpg" style="width:100%">
    <img src="image3.png" style="width:100%">
    <img src="krishnaimage.jpg" style="width:100%">
    <img src="image1.jpg" style="width:100%">
  </div>
  <div class="columns">
    <img src="image1.jpg" style="width:100%">
    <img src="image2.png" style="width:100%">
    <img src="krishnaimage.jpg" style="width:100%">
    <img src="image1.jpg" style="width:100%">
    <img src="image3.png" style="width:100%">
    <img src="krishnaimage.jpg" style="width:100%">
    <img src="image1.jpg" style="width:100%">
  </div>
</div>

</body>
</html>
 
 
Output 1 - Full window mode -
 
 
Output 2 - On mobile mode -