JavaScript by Example

Responsive designing with flexbox

If you look into the index.html file of our previous chapter, you will see that there are classes, such as col-md-2, col-xs-2, col-lg-2, col-sm-2, and so on. They are Bootstrap's grid classes. The previous chapter's layout was designed using the Bootstrap grid system. The system divides the page into rows and 12 columns and allocates a specific number of columns to each div in a row depending on the screen size.

There are four different screen sizes:

• Desktop (md)
• Tablets (sm)
• Phones (xs)
• Large desktops (lg)

However, we are not going to use Bootstrap grids in this chapter. We are going to be using a new layout mode introduced in CSS3 called the flexbox. Flexbox or flexible box, as it sounds, provides a box ...