Flexbox

Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals.

<div class="container">
   <div>item1</div>
   <div>item2</div>
   <div>item3</div>
   <div>item4</div>
</div>
.container {
   display: flex;
   flex-wrap: nowrap;
   background-color: green;
   flex-direction: row; 
}
  
.container div {
   background-color: yellow;
   width: 170px;
   margin: 30px;
   text-align: center;
   line-height: 50px;
   font-size: 18px;
}

The flex-direction property accepts 4 different values:

  • row (default): same as text direction
  • row-reverse: opposite to text direction
  • column: same as row but top to bottom
  • column-reverse: same as row-reverse top to bottom