Quick Introduction to CSS Flexbox.

This is a quick introduction to one of the most popular CSS concepts; which is CSS flexBox.
In this short write-up, I will introduce you to this popular CSS concepts.
What is Flexbox?
This is a one dimensional layout model that make it easy to design efficient and flexible layout, control page alignment, and distribute spaces among items.
Before the advent of flexbox, there are many methods to layout model in web development which includes;
• Block
• Table (For two-dimensional table data).
• Inline (Explicitly for test)
• Positioning

WHY FLEXBOX? With flexbox, items can be arranged as you want with enough flexibility, and it is one of the core concepts for front-end web developer.

To get a proper grasp of flexbox and how it works, we have to understand its core concepts.
Main axis (Left to right)
Cross axis (Perpendicular to Main axis, i.e from
top to bottom)
Parent Container (Flex Container)
Children Element (Flex Item)

Main Axis: Main axis flows from left to right by default, while main end is at the right, main start is the left of the main axis.

Cross Axis: Cross axis flows from top to down by default, while cross start is at the top, cross end is the bottom of the cross axis.

Parent Container (Flex Container): this container accepts various properties that are listed below.
 Display
 Flex-Direction
 Flex-Wrap
 Flex-Flow
 Justify-content
 Align-items
 Align-contents
Let us start by analyzing the above listed properties one after the other and knows the actual work they are meant for.

Display: You will recall, display is one of flexbox container properties, let me share a snippet of code before and after I added a display property to the code.

Before adding the display property

This is the result gotten from my the code below;

Notice the code above? We have a div with a container class; that div serve as the parent container, while the remaining nine div are the child elements, as rightly explained above.
In my CSS file (file not shared here), I added a border to the parent container, I gave the child-item element padding and align the text to center, while each of the boxes were given a unique background color.

After adding the display property.

The code that did the trick above is below.

What you need to do is simple and straightforward, locate your class of container in your CSS code, and input this DISPLAY:FLEX;.
NOTE: There is an inline-flex property as well, but rarely use.

Flex-Direction: This is an important property of the flex container as it establishes the main axis, which in turn decides how the flex-items are placed inside the flex container.
The default setting of the main axis is to flow from left to right, but we can however change how the flex-items are placed in the flex container by changing the direction of the flex-direction.

Let us go back to our CSS file to make the effect on our layout, the flex-direction can accept four value to change the direction of the flex-items, they are as follows.

           _Flex-Direction: row;_

By setting the flex-direction to row; the layout won’t be changed, as row is the default value for the flex-direction.

      _Flex-Direction: row-reverse;_

With this selection, our layout will change from the initial setup, it will change the flex-items in the reverse order, see snippet for proper understanding.

         The code

         _Flex-Direction: column:_

With flex-direction set to column, the direction of the main axis changes from top to bottom, which means the items are now stacked on each other. See code and result for more.

     _Flex-Direction: column-reverse:_

This property set the direction of the main-axis from top to bottom in the reverse direction.

Flex-Wrap: Another important property of the parent container is the flex-wrap property. By default, all the flex-items in a container will try to fit into a single line, and where there is limited space, the flex-items will overflow to another line. With flex-rap, three distinct property can be set on the flex-warp property.

        _Flex-Wrap: nowrap:_

Nowrap is the default value of flex-warp, and it will display as the initial layout, snippet of code for more illustration.

           _Flex-Wrap: wrap:_

With the value of the flex-wrap set to wrap, the flex-items will be wrapped within the flex container. See code for more illustration.

Wrapping takes place as at when needed, as you can see, as there is not enough space for box 7 and box 8 they moved down to row below.

      _Flex-Wrap: wrap-reverse:_

The main distinct between wrap-reverse and wrap is instead of the item's to move to row below as in the case of war, it in turn moves to row above because of the wrap reverse, see code snippet and output for illustration.

Flex-Flow: Another property of the parent container is the flex-flow property. It is straightforward, as it is the shorthand for flex-direction and flex-wrap.
Flex-flow is set to flex-direction = row and flex-wrap = nowrap by default because that is the default value for flex-direction and flex-wrap property.

While setting the values for flex-flow property, be minded that the first values is for the flex-direction while the second value is for the flex-flow property.

We can set all values for flex-direction (row, column, column-reverse and row-reverse) and values for flex-wrap (wrap, nowrap, wrap-reverse) on flex-flow.

Justify-Content: This is an alignment property provided by flexbox on flex container; Justify-content defines the alignment along the main axis, recalled that main axis flows from left to right.

  _ Justify-content: flex-start:_

The above is the code and result when the justify-content value is set to start. Here the items will be aligned to the left which is the start of the main axis.

    __Justify-content: flex-end:_

As the name implies, setting justify-content value to end will align the items to the right of the main axis which is the end of the main axis.

     _Justify-content: center:_

By setting the value for the justify-content to center, you have aligned the items in the flex container to be at the center of the main axis.

    _Justify-content: space-between:_

With space between, the extra spaces between the items are evenly split and added in between the flex items.

    _Justify-content: space-around:_

You might desire that there should be spaces at both beginning and end of your item, the value to set your justify-content to be space around, but note the spaces between the flex items is twice more than the space at the start and end of the items.

      _Justify-content: space-evenly:_

To get the remaining spaces evenly distributed in the container, set the value of the justify-content to space evenly.

One important point you should keep in mind while working with justify content is that, it align the items based on the main axis. It works directly with the direction set by flex-direction.
If the flex-direction is set to column, then, the justify-content will deal with vertical alignment.

Align-items: This is an alignment property provided by flexbox on flex container; Align-items defines the default behavior of how flex items are laid out along the cross axis of the container.
It works like justify-content but in the perpendicular direction.
Align-Item: Stretch:

Above is the snippet of cod and result when the align-items value is set to stretch.
This is also the default value of the align-items property.

       _Align-Item: Flex-Start:_

All the items are pushed to the cross start, we should remember that cross axis flow from top to bottom.

    _ Align-Item: Flex-End:_

In the above code, all items are pushed to the cross end.

        _Align-Item: Center:_

The code above centered along the cross axis.

Children Elements (Flex Items): this container accept various properties that are listed below.
 Order
 Flex-grow
 Flex-Shrink
 Flex-Basis
 Flex
 Align-self

Order: The items in a flex container are laid out in the order in which they appear in the source code. We can only change this order in flex by using the order property.

By giving the items an order higher than 0, the item will be pushed all the way to the end; this is because by default all items have a default order of 0.

Flex-Grow: The next property that can be applied on a flex items is the flex grow property; this property specifies the amount of spaces inside the flex container the item should take up.
The flex-grow property is relative to the size of other items in the container.

Flex-grow default value is 0 and if you want to effect change, you will set values greater than 0.

Flex-Shrink: This property specifies the amount of spaces inside the flex container the item should shrink if necessary, but unlike flex-grow, the default value for flex-shrink is 1.
The flex-shrink property is relative to the size of other items in the container.

Flex-Basis: The next property is the flex-basis, which specifies the initial space of a flex item, before the distribution of extra spaces in the container. This is used in place of with ion flex layout.

Flex: Flex is the short hand for flex-grow/flex-shrink and flex-basis.
Although, we can set the value individually, but the recommended way is to use the flex property.
We can set the values like code below i.e three values separated by space.

The first value represent the flex-grow, second value represent the flex-shrink while the third value represent the flex-basis.
N.B the default value for flex-grow, flex-shrink is 0 and 1 respectively.

Align-Self: Align-self is used to control the alignment of the individual flex-items along the cross sectional axis.

** I hope with this short but precise write-up about the popular css flexbox you will be able to understand it well.
Thanks for your time.**