Css    Flexbox   Cheatsheet

Css Flexbox Cheatsheet

Hello Folks, In this article I am writing about CSS Flexbox.

The Flexbox also known as Flexible Box Module is a web layout model.Flexbox makes us easier to design flexible responsive layout structure without using float or positioning.

The two axis of Flexbox.

1.Main-axis

The main axis is usually defined by flex-direction and it has four values. The default flex-direction is row.

  • row
  • row-reverse
  • column
  • column-reverse

If the main axis selected as row or row-reverse, the main axis runs from left to right of page.If column or column reverse is selected,the main axis runs from top to bottom of the page.

2.Cross-axis

The cross axis runs perpendicular to main axis,if main axis is selected as row then cross axis will be column.

Flex-Wrap

By default, flex items will all try to fit into single line. We can change that and allow the items to wrap as needed with this property.

  • no-wrap

all flex items will be on one line

  • wrap

flex items will wrap onto multiple lines, from top to bottom.

-wrap-reverse

flex items will wrap onto multiple lines from bottom to top.

Justify-Content

The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.Values of justify-content are:

Align-Items

In Flexbox, align-items controls the alignment of items on the Cross Axis.