Flexbox allows you to create a responsive layout that is flexible to the window size.
In this post, I would share some of the important flex-box properties. There is also a demo at the end.
Ordering content with order:0...
using flexbox
[Child item property]
The higher the order, the later that item comes.
Syntax:
.child-item {
order:0;
}
In case of a row layout, the higher order item is pushed to the extreme right.
In case of a column layout, the higher order item is pushed to the very end.
By default, the order is 0 of all items.
Example:
.red {
background-color: #eb4d4b;
}
.green {
background-color: #6ab04c;
order: 1;
}
.indigo {
background-color: #30336b;
order: 2;
}
<div class="green">order:1</div>
<div class="indigo">order:2</div>
<div class="red">order:0</div>
Output
Enabling wrap with flex-wrap
using flexbox
[Parent property]
Wrap allows you to control the content in horizontal layout when you run out of space.
By default wrap is disabled.
Syntax:
.container{
flex-wrap: nowrap | wrap;
}
When wrap
is enabled, the items are pushed to the next line, if the screen is shrunk and space runs out.
Justifying content using flexbox
[Parent property]
-
justify-content: flex-start;
: Items are bunched up to the left.
-
justify-content: flex-end;
: Items are bunched up to the right.
-
justify-content: center;
: Items are aligned to the center.
-
justify-content: space-between;
: Items have space between them.
Aligning content across a container using flexbox
[Parent property]
For the align-items
to properly work, you need to set the height of the container.
align-items: flex-start;
align-items: flex-end;
align-items: center;
Demo
You can view a live preview of the flexbox layout concepts in this link.
Feel free to experiment and play around :)
Wrapping up
I hope you found this tutorial helpful. Thank you for reading till the end.
I would love to connect with you on any of these platforms.
Top comments (0)