Here, We will gonna talk about a valuable design layout of CSS that is Flexbox.
First of all, what exactly is Flexbox?
- Flexbox is CSS web layout model.
- It allows elements to be set according to screen size.
- With this, we can create a responsive design layout.
- It’s Officially called CSS3 Layout Model.
Prerequisite
- Basic knowledge of HTML and CSS
Now, First, we will create a simple HTML file called index.html, in this, we will be implementing the Flexbox concept.
Let’s just start coding by creating a div that will work as a flex container.
We will gonna give this div a class named container that will have display: flex; and this is the beginning of our Flexbox journey.
As you can see I created 3 div box designs to show how can we play with them in Flex.
Now, we will gonna use the flex-direction property that will help to arrange
box element aka div row and column-wise with Flex.
By default, the elements in Flex container are arranged row-wise.
See the Pen
Untitled by Karan Rajgor (@KaranRajgor)
on CodePen.
Now, We will arrange them column-wise with flex-direction: column; property, from top to bottom.
See the Pen
Flex-Direction by Karan Rajgor (@KaranRajgor)
on CodePen.
We can also stack them in reverse order from bottom to top.
By Using flex-direction: column-reverse;
See the Pen
Flex-Column-reverse by Karan Rajgor (@KaranRajgor)
on CodePen.
It’s possible for rows also, we can queue elements in reverse order from right to left.
By using flex-direction: row-reverse;
See the Pen
Untitled by Karan Rajgor (@KaranRajgor)
on CodePen.
Now, for the next image if you have more elements than the width of the flex container and
Do you want them to wrap in the next line? there is a solution for that also it’s called
flex-wrap: wrap;
See the Pen
Untitled by Karan Rajgor (@KaranRajgor)
on CodePen.
Without flex-wrap: wrap, by default flex-wrap: nowrap is applied to flex container.
See the Pen
Flex-NoWrap by Karan Rajgor (@KaranRajgor)
on CodePen.
Now, another flex property flex-wrap: wrap-reverse; will wrap flex items if necessary in reverse order.
See the Pen
Flex-Wrap-Reverse by Karan Rajgor (@KaranRajgor)
on CodePen.
So, That’s the basics about Flex Layout.
I hope you will enjoy this article.
