ADVERTISEMENT

What is Flexbox in CSS? Learn flexbox With Example

Telegram Group Join Now

ADVERTISEMENT

What is Flexbox in CSS? Learn flexbox With Example

Flexbox in CSS
Flexbox in CSS
 

Hello Coder, today I’ll explain all you need to know to start using a CSS Flexbox. We learn how to use flexbox and where to use it. We give examples with code so you learn easily what is flexbox.

ADVERTISEMENT

ADVERTISEMENT

Basics

Alright, let’s dive into the tutorial now. Flex is a display type that enables cards or any div to appear beside each other in a row. There are certain properties of flexbox that make it famous such as its responsiveness and more. Let’s see how to use the basic flex display followed by other properties.

ADVERTISEMENT

We first add the HTML code below:

ADVERTISEMENT

<div class="flex-box">
<div>1</div>
<div>2</div>
<div>3</div>
</div>

Then, we add the CSS code below:

.flex-box {
display: flex;
}
.flex-box > div {
background:white;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
margin: 10px;
border-radius:10px;
padding: 20px;
font-size: 30px;
}

The output would look like this:

 

ADVERTISEMENT

Flexbox in CSS

If you observe the CSS code, you will understand that we only added a display of flex for our flexbox. Below it, we styled the boxes by giving them padding, color, and more. The main code necessary here is the display: flex; Next, we will look at the properties of flex to make it better.

5+ HTML CSS Projects With Source Code

1. Flex Direction

ADVERTISEMENT

The flex-direction property determines whether you would like the flex to arrange from left to right, right to left, top to bottom, or bottom to top. Below is the code for all these 4 directions. The row is horizontal and Column is vertical.

ADVERTISEMENT

flex-direction:row;
flex-direction:row-reverse;
flex-direction:column;
flex-direction:column-reverse;

For example, I will be using the flex-direction: column in the photo below. The output would look like this:

Flexbox in CSS

2. Flex Grow

In this property, we can grow our flex boxes in a row to fill up the row completely if necessary. In other words, it defines how much space each flexbox should take up. For example, we can make one out of 3 flex-boxes to grow even more longer. A perfect example would be the image below.

Responsive Gym Website Using HTML ,CSS & JavaScript

 

ADVERTISEMENT

Flexbox in CSS

Now that you understand the concept, you will need to add this block of code below to enable it in our CSS file.

ADVERTISEMENT

div:nth-of-type(1) {flex-grow: 1;}
div:nth-of-type(2) {flex-grow: 3;}
div:nth-of-type(3) {flex-grow: 1;}
If you set flex-grow as 1, it will divide the spaces to be equal with the other boxes.

3. Flex Wrap

ADVERTISEMENT

By default, flexbox will try its best to fit into one tray/row/column. However, we can set extra flexboxes to move down/side into another tray by using the flex-wrap property. The image below explains it even more.

ADVERTISEMENT

 

ADVERTISEMENT

Flexbox in CSS
Now, for this property, we will just add the following one-line code only. Do remember to remove the flex-grow property before testing this property.

 

flex-wrap: wrap;

 

4. Flex-flow

In this property, the flex-direction and flex-box properties are combined together. The default value of this property is row no-wrap. The image below is used for an example of flex-flow: column wrap.

 

 

Flexbox in CSS

 

The code would look like this:

.flex-box {
display: flex;
flex-flow: column wrap;
}

5. Flex

Now that you have learned the 4 common properties, you will understand this property pretty well too. This property is a shorthand property (an easier line of code) to execute flexbox properties. For example, we can add the code of flex: 1

Browser Support

Now that you have learned flexbox, you might feel like using it in all of your projects. However, flexbox is only supported in some browsers. Flexbox works in modern browsers but does not work in Internet Explorer 10 or earlier versions. Thus, you might want to keep that in mind. But besides that, I believe you should definitely try using flexbox.

This tutorial is just on the basics of flexbox. There are many more properties on flexbox. If you’re interested in part 2 of this tutorial, do comment down below.
Thank You!

If you have any doubts, uncertainties, or suggestions, do comment down below or you can email me at codingporium@protonmail.com. I hope this flexbox tutorial was useful for all of you and I would like to thank Code with Random for giving me the chance to write here. I hope to see you all in future posts. Goodbye!

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT