The CSS3 Flex Box layout is used on pages that can be resized smoothly.

For this demonstration I’ll use three divs with a class of box. Each with with a second class of one,two,three to distinguish their colors.

<div class="container">
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
</div>
.container{
}

.box{
  width: 100px;
  height: 100px;
}

The parent element (container) of the boxes must be set to display flex first

.container{
  display: flex;    
}

By default the flex boxes have a flex-direction of row. Meaning inline but they can also be

Column

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

The awesome thing about flex box is that each box can grow or shrink with the screen size.

Using flex-grow each box can change dimension as the screen grows.

.box{
  flex-grow: 1;    
}

In this case I applied an equal value to all so they each grow in the same proportion.

Giving the last box a higher value will result in different proportions

.one{
  flex-grow: 1;    
}
.two{
  flex-grow: 1;    
}
.three{
  flex-grow: 4;    
}

flex-shrink does the same only as the screen shrinks.

.three{
  flex-shrink: 6;    
}

One last key concept is flex-wrap by default the container will expand the screen size’s width if the boxes don’t fit.

Setting the container to wrap will cause the boxes to drop under one another once they don’t fit

.container{
  display: flex;
  flex-wrap: wrap;
}

Flexbox gif

And that’s the basics of flex box. Thanks fo reading!