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>

Leave comment

Your email address will not be published. Required fields are marked with *.