Best Jquery ,javascript, HTML5 CSS3 tutorial with jquery examples, php script , demos for beginners, web designers and web developers.

Jquery

Jquery Training

Jquery training blog

Introducation to css flexbox direction part two

The flex-direction CSS property establishes the main-axis, thus defining the direction flex items are placed in the flex container.
It specifies how flex items are placed in the flex container, either in horizontal rows or vertical columns.


The below example of css flexbox direction showing the alignment of items within the container div irrespective of size of the item.
We can easily control the directions of the item order of the item within the container using flex box different properties.

We have discussed about the <a href=”http://jquerytraining.com/introducation-css-flexbox-part-one/”>flexbox</a> in the last post. Using flexbox we can achive good design with cleaner code.
It has the ability to alter the width and height of the items to best fit the screen.

Today I am going to write about css

flexbox direction

.flex-container {
flex-direction: row | row-reverse | column | column-reverse | inherit | initial;
}

<!DOCTYPE html>
<html>
<head>
<style>
.main-flex{
display: flex;
flex-direction: row;

justify-content: space-around;
flex-wrap:wrap;
margin-bottom:5px;
}
.flex-container {
display: flex;
flex-direction: row;
background-color: #a6a6d4;
justify-content: space-around;
flex-wrap:wrap;
margin-bottom:5px;
}

.flex-container>div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}

.flex-container-row {
display: flex;
flex-direction: row-reverse;
background-color: #48488e;
justify-content: space-around;
flex-wrap:wrap;
margin-bottom:5px;
}

.flex-container-row>div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.flex-container-column {
display: flex;
flex-direction: column;
background-color: #48488e;
justify-content: space-around;
flex-wrap:wrap;
margin-bottom:5px;
}

.flex-container-column>div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
.flex-container-column-reverse {
display: flex;
flex-direction: column-reverse;
background-color: #48488e;
justify-content: space-around;
flex-wrap:wrap;
margin-bottom:5px;
}

.flex-container-column-reverse>div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
</style>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

</div>

<div class="flex-container-row">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

</div>
<div class="main-flex">
<div class="flex-container-column">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

</div>
<div class="flex-container-column-reverse">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

</div>
</div>
</body>
</html>






About the author

Joydeb Choudhury holds a Master's degree in Computer Application from I.G.N.O.U. After working as a web developer in various companies he has started bloging in 2016.

Recent Posts of blog

Downalod Free Php Scripts