Hello everyone! I have started learning how to design webpages. Initially I used position and margin properties to align items in a particular place and make space among those items. Now I came to know about flexbox. Really it is very useful .Flexbox provides an efficient way to layout and align items and distribute the required space between the items in side the container. In this article I have made cheat sheet for flexbox. In flexbox layout there are some properties that can be applied to the container(parent) and some properties can be applied to the items(children) directly.

items can aligned based on 2 axis:

    - main axis (It is defined by "flex-direction" property.
                         For web pages main axis is row by default)
    - cross axis(opposite to the main axis).

Properties: (can be applied to the container only) display: It will make the container flex box layout.

             display:flex;

flex-direction: It will fix direction of main axis .

           flex-direction: row/column/row-reverse/column-reverse

justify-content: It will work through the main axis. row-->left to right, row-reverse-->right to left, column-->top to bottom, column-reverse-->bottom to top.

          justify-content: flex-start/flex-end/center/space-between/
                                     space-around/space-evenly

align-items: It will align items of container based on the cross axis.

        align-items: flex-start/flex-end/center/stretch/baseline

flex-wrap: It allows the items to be in one single line or wrapped in multiple rows / columns

        flex-wrap: nowrap/wrap/wrap-reverse

flex-flow: It is the combination of both flex-wrap and flex-direction

        flex-flow: row wrap (flex-direction properties  flex-wrap properties)

align-content: It distributes space between and around the wrapped items inside the container.

        align-content: flex-start/flex-end/center/stretch/space-between/
                                space-around/space-evenly

Properties :(can apply to the individual item)

order: It will decide the order of individual item. The items are sorted based on the ascending order value.

         order: negative values/positive values

align-self: It will help individual items inside the container to be aligned

        align-self: auto/flex-start/flex-end/center/stretch/baseline

flex-grow, flex-shrink: These properties will provide space for an item based on the ratio values.

      flex-grow: positive values
      flex-shrink: positive values

Thank you!!!!