Learn CSS flexbox | What is flexbox in CSS? css flexbox
Hey friends, today I’ll explain all you need to know to start using a CSS Flexbox. Before we dive in, I’ll introduce myself.
I’m CodingPorium and I make coding tutorials and provide Free Source Code. I’m a newbie to YouTube, but I have experience in front-end web development for over 3 years. Do check out my YouTube channel here or by searching for CodingPorium on YouTube for more!
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.
We first add the HTML code below:
Then, we add the CSS code below:
The output would look like this:
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.
1. Flex Direction
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.
For example, I will be using the flex-direction: column in the photo below. The output would look like this:
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.
Check it more
3. Flex Wrap
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.
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 .
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
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 definetely try using flexbox.