Flexbox, The CSS New Layout

The Flexbox Layout officially called CSS Flexible Box Layout Module is new layout module in CSS3 made to improve the items align, directions and order in the container even when they are with dynamic or even unknown size.

The prime characteristic of the flex container is the ability to modify the width or height of its children to fill the available space in the best possible way on different screen sizes.

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive.

The flex layout is constituted of parent container referred as flex container and its immediate children which are called flex items.

.flex-container {
  display: -webkit-flex; /* Safari */
  display: flex;
}

<header>
  <div class='cell odd'>1</div>
  <div class='cell even'>2</div>
  <div class='cell odd'>3</div>
   <div class='cell even'>4</div>
  <div class='cell odd'>5</div>
  <div class='cell even'>6</div>
</header>

CSS. PLay by removing or altering display:flex from wrapper.

/*Define flex container*/
body {
 margin: 0; 
}

header {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  height: 100px;
  position: fixed;
}

.cell {
  font-size: 50px;
  color: white;
  padding: 10px;
  text-align:center;
  font-family: lato;
  font-weight: 300;
  box-sizing: border-box;
}

.odd {
  background: #e51400;
}
.even {
  background: #fa6800;
}

Codepen link to test:

Additionally you add flex-direction: row | row-reverse | column | column-reverse for horizontal and vertical handling of children.

References CSS Flexbox Layout Flexbox CSS3, A Visual Guide