As web developers all the time we need to continue learning. We should already know the basics of HTML CSS and some JavaScript. Although we can be experts sometimes there is something new that we can learn. One of the things very useful to learn is CSS Flexible Box Layout. We also commonly call it by the term of "CSS Flexbox". Let's start learning. As the title implies, 15 minutes is enough to learn CSS Flexbox.
Initialize Flexible Box
Let's create an HTML page. In that page we are going to create a "div". Once we create a div we can create some more inside the one created. As you may already know the outer div is the parent of all the others. Most times we call it the "Flex Container". We can add the class name we desire to the container. Then we apply CSS to our HTML page. The only property we need to initialize flexible box is the "display" property. The value for the property is flex as we show in the example below. Once we apply the display property to the container, every other element will become part of the Flexbox Layout. In the example below we have a flex container with four items.
Flex Direction
The example above is the most basic example of CSS flexible box. As we may see we have some blocks that we display in flex. Once we display the parent division in flex all the children by default are going to be in a row. The first children will be displays first and so on. We can change the flex direction as we also show in the example below. There are many directions available in the flexbox layout. They are Column, Column Reverse, Row Reverse, and Row as the default. Let's take a look to each one of them.
Flex Direction Column
To display items as column we only need to add "flex-direction" property to the container. The value is column as the following example. We also added some colors borders and margins. Adding these properties we show a clear result. You can add the style you want to any item in the flexbox.
Column Reverse
As we saw in the example above, we can display flexbox in columns. we are also able to reverse columns. In order to do that we only need to use the same property of "flex-direction." Then we apply the value of "reverse-column" as we may see in the example below.
Row Reverse
When we set the flexbox, all its items by default are in a row. For that reason is not necessary to apply "flex-direction" row. Although we don't need to display row, we are able to reverse the order of the row. By only adding the "row-reverse" value to the "flex-direction. The example below also shows how to accomplish that.
The Flex Basis Property
By now we have seen how to display any div using the flexbox layout. We saw that we can change the directions and apply style. Also we could see that size is automatic for each item inside any CSS Flexbox container. We are able to change the size for every item inside any box. There are many methods to change the size of items. One of them is the "Flex Basis Property. In order to use the "Flex Basis" method we only need to place the "flex-basis" property to the item we desire. The value of the flex-basis property can be in pixels. Also there are many others styling units; but pixels is most used.
The Flex Grow Property
The "Flex Grow" Property is similar to the Flex Basis Property. Their main difference is that we can specify the size of flex basis in pixels. For that reason flex basis could result in overflow. Instead of pixels, flex grow uses a positive integer value system in order to assign element size. Using flex grow property we avoid overflow. To apply the flex grow property we only need to type the "flex-grow" as we can see in the example below.
The Flex Shrink Property
The "Flex Shrink" property is similar to the "Flex Grow" Property. The main purpose of the flex shrink property is to reduce space in case we don't have enough space in the container. In order to implement the "flex shrink" property, we only need to type it as "flex-shrink". Its value will also be a positive integer. We can use it along the flex grow property. By now we are not showing an only flex shrink property because below we are going to show a short hand to use the three properties at once.
Flex Wrap
We saw above two main ways to resize flexbox. They are "flex basis" and "flex grow". Also we could see when we use the flex basis we could face overflow. To avoid issues with overflow we can use the "flex wrap" property. To implement it we only need to apply "flex-wrap" to our code. The property can have the values of "wrap" or "no wrap". By default it is set to "no wrap". Once we change it to the "wrap" value, all the overflow will continue in the next line. We also show a brief example below.
Flex Flow
Flex Flow is a combination to reduce code. As we could see above we have the "flex direction" property. Then we saw the "flex-wrap" property. We are able to combine them using only the "Flex Flow" Property. To implement it we only ned to type the "flex-flow" property. As you may assume it has two values. The first value is the "flex-direction" and the second value is the "flex-wrap". The example below is the same one from above using the flex-flow shorthand
The Flex Short Hand property
We are able to implement the"flex-grow", "flex-shrink", and "flex-basis" at once. That is possible by only using "flex" property for each flex item. The flex property is a short hand to apply all of them at once. As you also could assume now, flex property. contains three values. The first value is the value for the flex-grow property. The second value is the value for flex-shrink. Third value is the flex-basis. You can see in the following example how it works.
Aligning Flex Items
We are able to align items while using flexible box layout. Before showing you examples of how to align items, here we show two images. These two images detail the flexible layout configuration. After you carefully examine the images then proceed to the examples.
In the images above you can see how the cross axis differs in columns and rows. Now it's time to continue learning how to align flexible box items. In order to align items to the cross axis, we only need to apply the "align-items" property to the container. The value of this property can be "stretch", "flex-start", flex-end", or "center". Below we can see examples for each one of them
Align Items to Flex Start
The first example we are going to see shows how to align items to the flex start. In the example below we set height for the container so you can see easier the effects of aligning items to the flex start. As you may already know, we only need to apply the "align-items" property; then we add as value flex-start
Align Items to Center
We are also able to align items to the center of the cross axis. We only need to apply the value of center to the "align-items" property as you may see in the. following example.
Align Items to the Flex End
As you saw in the two previous examples we have the ability of aligning items on the cross axis. To align items to the end of the cross axis we only need to apply the "align-items" property to the container as we did above. The only difference will be the value. In this case the value is "flex-end"
The Stretch Value
We are also able to align flex items using the stretch value in the flex container. Now we are not showing you an example using the stretch value because that is the default for flex box layout. All the other examples you saw above have the stretch value as default; that's why it's not necessary.
Justify Content Property
As we could see above, the "align-items" property is able to align items on the cross axis of the container. We are also able to align items on the main axis of any flexible box container. To achieve that we only need to use the "justify-content" property. As you can imagine there are different values for that property. These values are "flex-start", "flex-end", "center", "space-around", "space-between", and "space-evenly." Now let us see some examples.
Justify content to the center
As you now may assume, to justify content to the center of the main axis we only need to apply the "justify-content property to the flex container. Its value is "center". The example below shows some content justified to the center of the main axis.
Justify Content to Flex End
We can also justify content to the end of the main axis just by applying the value of "flex-end" to the "justify-content" Property. We also show you a brief example below.
Justify Content to the Flex Start
We also can use the justify content property with a value of "flex-start". Although we can use it that is not necessary because that is the default of justify content. Therefore we are not showing that example now.
Justify Content Space Around
We can also add some space between flexbox items. That's possible by only adding the value of "space-around" to the "justify-content" property as we can also see in the example below.
Space Between Items
We saw above the space around value which adds space around each item. The "space-between" value is similar but different. It adds space between items not around them. We can also see another example below and note the difference between them.
Justify Content Space Evenly
As all the other types of "justify-content" We only need to add the value of "space-evenly" to have the content justified with a space equal on both sides. Also similar to the space around but not equal. The example below shows how to implement and the results of justifying content with space evenly.
Conclusion
By now we have learned the most necessary properties of CSS Flexbox Layout in a short time. As The title implies we only need 15 minutes to learn it. Although we can learn it in 15 minutes we need to review it every certain time to keep our minds refreshed.
Also we can get more information about Flexbox Layout in the MDN Flexbox Layouts website. Hopefully you enjoyed and learned a lot about CSS Flexbox.
More at Moe's Link
Guide to CSS Grid Layout
Top comments (0)