Learn CSS Flexible Box Layout in 15 Minutes
Published: 2021-08-08 16:28:34

As web developers all the time we need to continue learning. We should already know the basics of <a href="https://moeslink.com/easy-learn-html/">HTML</a> <a href="https://moeslink.com/intro-to-css/">CSS</a> and some <a href="https://moeslink.com/intro-to-javascript-for-web-development/">JavaScript</a>. 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.
{% codepen https://codepen.io/moreno8423/pen/NWpmwWx %}


__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.
{% codepen https://codepen.io/moreno8423/pen/XWMygrL %}


__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.
{% codepen https://codepen.io/moreno8423/pen/mdWQwdm %}

__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.  
{% codepen https://codepen.io/moreno8423/pen/WNpYOby %}

__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. 
{% codepen https://codepen.io/moreno8423/pen/VwpVbzw %}

__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.
{% codepen https://codepen.io/moreno8423/pen/rNybJMe %}

__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.
{% codepen https://codepen.io/moreno8423/pen/eYvaJqO %}

__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
{% codepen https://codepen.io/moreno8423/pen/jOBoqKO %}

 __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.
{% codepen https://codepen.io/moreno8423/pen/RwpmRrd %}


__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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v3oz7bwvcx51lizjbyj0.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/in111kgwc7k4c579rig3.png)

 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
{% codepen https://codepen.io/moreno8423/pen/RwVWqER %}


__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.
{% codepen https://codepen.io/moreno8423/pen/rNmOQgR %}


__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"
{% codepen https://codepen.io/moreno8423/pen/vYmNvOg %}

__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.
{% codepen https://codepen.io/moreno8423/pen/VwbvqMb %}

__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.
{% codepen https://codepen.io/moreno8423/pen/ZEKbVdb %}

__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.
{% codepen https://codepen.io/moreno8423/pen/OJmydJr %}

__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.
{% codepen https://codepen.io/moreno8423/pen/NWjGoGZ %}

__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.

{% codepen https://codepen.io/moreno8423/pen/OJmydpG %}


__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  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">MDN Flexbox Layouts website</a>. Hopefully you enjoyed and learned a  lot about CSS Flexbox.  

More at <a href="https://moeslink.com">Moe's Link</a>
<a href="https://moeslink.com/guide-to-css-grid-layout/">Guide to CSS Grid Layout </a>