Flex Box For Responsive Web Design

FlexBox makes sure that web page behaves in a foreseeable manner when it is loaded on different devices with different display dimensions.

W3C has introduced a new web layout method named CSS FlexBox Layout. Using these layout method responsive elements inside the container will automatically adjust according to the size of the devices. It aims at providing a layout that works efficiently even when the dimension of the devices are unknown.

Items that are placed in the flex container are reordered and rearranged automatically according to the space available.

Flex layout gives self-altering ability to the container. It allows the container to adjust its width and height according to the device i.e. it can expand itself if space is available and shirk itself if less space is available.

It contains flex containers and flex items. Few of the flex options are as follows:

  • flex-direction: helps in defining the direction of the flex container.
  • justify-content: align the container horizontally when the free space on the main axis is not utilized properly.
  • align-item: it determines how the item gets placed on the cross axis on each line.
  • align-content: determines how the cross-axis align for default.
  • align-self: determines how the single item is placed along the cross-axis. In addition, it overrides any default value set by the align-item.

Here is the list of few blogs and websites where you can learn about it: