Flexbox CSS Layout

Before flexbox CSS layout module, there were following layout modules are available:

  • Block
  • Inline and inline-block
  • Positioning of div using position

The flexbox layout module target to providing a more efficient way to manage layout, and make it more easier to design structure without having to float and positioning, The container having unknown or/and dynamic width, it will distribute space among the items in the container.

Flexbox Elements

A flexbox having main container with flexbox CSS and with a one or more element as a child elements

Flexbox properties for the parent elements

  • flex-direction
  • flex-wrap
  • flex-flow
  • justify-content
  • align-items
  • align-content

Flex container with child div's inside flex-wrapper i.e.

<div class="flex-wrapper">

We need to add property for parent div

.flex-wrapper {
  display: flex;

Direction properties for the parent elements

  1. Flex-direction

Flex-direction property defines in which direction the container (.flex-wrapper) want to flow child items

Properties for flex-direction:
- flex-direction: column;
- flex-direction: column-reverse;
- flex-direction: row;
- flex-direction: row-reverse;

flex-direction: column;

The column value fix the child items vertically

.flex-wrapper {
  display: flex;
  flex-direction: column;
flex direction column

flex-direction: column-reverse:

The column value fix the child items vertically but from bottom to top

.flex-wrapper {
  display: flex;
  flex-direction: column-reverse;
flex direction column reverse

flex-direction: row

The row value fix the child items horizontally from left to right

.flex- wrapper {
            display: flex;
            flex-direction: row;
flex direction row

flex-direction: row-reverse

The row value fix the child items horizontally from right to left

.flex- wrapper {
            display: flex;
            flex-direction: row-reverse;
flex direction row reverse