CSS Flexbox Properties Guide Part 1

In this post we will see different CSS Flexbox properties of , their uses and how you can make your UI more flexible.

CSS Flexbox / Flexbox layout module is a useful module which helps in layout , alignment of elements in a container. The basic idea is to give the container (Flex container) the ability to alter the items (flex items) height & width accordingly.

These are the different properties of Flexbox we will be discussing in this tutorial.

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content
  • align-self
  • flex-order
  • flex-shrink
  • flex-grow
  • flex-basis

In order to make your container a flex container you need to add the property
display: flex;

.container {
display: flex;
}

flex-direction: flex-direction property is used to align the children of the flex container in four different ways row, column, row-reverse, column-reverse. we will see how each of them aligns the flex items in the container. You define it by using the property flex-direction like below.

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

flex-direction demo

The above gif shows how flex-direction row and column effects the flex items inside the flex container.

Below is the demonstration of remaining flex-direction properties reverse and column-reverse, either of them would just reverse the order of the flex-items in the flex-container. The below gif show how the order 1-5 is reversed to 5-1 when used flex-direction: row-reverse.

flex-direction demo