Flexbox

Flexbox is the one of the loudest and most modern layout methodologies used in current CSS projects. With flexbox, you can create a structure for your web page, which is more elastic than projects based on floating boxes. Why? We will check and make an investigation in this chapter. What you need to remember is that Internet Explorer supports flexbox since its 11th version.

Let's look at the basics of flexbox:

As you can see in the preceding screenshot, there is new dictionary related to flexbox:

• Main axis (green arrow)
• Main start (red line)
• Main end (red line)
• Main size (black line)
• Cross axis (green arrow)
• Cross start (red line)
• Cross end (red line)
• Cross size (black line)

Initialization of flexbox is very simple. You just need to add the following code to your container:

.flexContainer
  display: -webkit-box
  display: -moz-box
  display: -ms-flexbox
  display: -webkit-flex
  display: flex

The compiled code is:

.flexContainer {

    display: -webkit-box;

    display: -moz-box;

   ...