In this article you’ll learn about CSS Flexbox, which is a layout model introduced in CSS3 that determines how different elements are arranged in a webpage. This layout model fits elements dynamically into a container so that the layout of the webpage looks perfect in most of the screen sizes.

There are three main concepts of flex model:

flex items: Elements in the flex model.

flex container: contains the flex items.

flex direction: determines the direction to which the flex items are arranged. Let’s get started!

Creating a flex container:

<div class="flex-container">  
    <div class="flex-item">ITEM 1</div>   
     <div class="flex-item"> ITEM 2</div>  
    <div class="flex-item"> ITEM 3</div>
</div>

.flex-container {  display: flex;}

display:flex property is added to the container so that the flex-items are laid out horizontally by default inside the container. The elements inside the container are scaled automatically so that all the elements fit inside the container.

To lay the flex items vertically in a container use

.flex-container{ display:flex; flex-direction:column;}

justify-content

Aligning flex-items can be done using the property justify-content

.flex-container{ justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit; }

values for justify-content :

flex-start : Default value. Items are positioned at the beginning of the container.

flex-end : Items are positioned at the end of the container.

center : Items are positioned at the center of the container.

space-between : Items are positioned with space between the lines.

space-around : Items are positioned with space before, between, and after the lines.

initial : Sets this property to its default value.

Inherit : Inherits this property from its parent element.

align-items

The align-items property is same as justify content. But here, the items are aligned vertically.

align-items: flex-start | flex-end | center | baseline | stretch;

values for align-items

flex-start − The flex items were aligned vertically at the top of the container.

flex-end − The flex items were aligned vertically at the bottom of the container.

flex-center − The flex items were aligned vertically at the center of the container.

stretch − The flex items were aligned vertically such that they fill up the whole vertical space of the container.

baseline − The flex items were aligned such that the baseline of their text align along a horizontal line.

Conclusion

CSS Flexbox is very easy to learn and understand. Now that you’ve learned the basics you can try practicing with the Flexbox layout. Head out to Flexyboxes and Flexbox Froggy to experiment with Flexbox. Also, if you'd like to know more about Flexbox, visit CSS-tricks or W3C: CSS Flexible Box .