Brief Introduction of CSS Flexbox

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.

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories