Complete Guide To Start With CSS Flexbox: Website Layout

CSS flexbox is the pattern/ way to structure the elements of webpage.
This page tell you the basics of Flexbox’s properties.

Introduction:

To work with flex we have to understand there are two types of element:

  1. Parent: The element which is marked display: flex
  2. Child: The direct elements inside the Parent Element

Example: Element with class flex-parent is automatically Parent element and class “child” is the child element.

Properties

Property for parent elements

  • display
  • flex-direction
  • flex-wrap
  • flex-flow
  • justified-content
  • align-items

display: flex

flex-direction

This defines the direction of the arrangement of the child elements.
Possible Values: row, col, row-reverse and col-reverse

flex-wrap

Possible Values: wrap, nowrap and wrap-reverse

flex-flow

The flex-flow property is a shorthand property for: flex-direction flex-wrap
Example : flex-flow: row nowrap

justified-content

The justify-content property aligns the flexible container's items when the items do not use all available space on the main-axis (Horizontally if flex-direction: row and Vertical if flex-direction: col).

I am Frontend Developer, exploring the power of Javascript. I have worked on Angular, ReactJS and React Native.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store