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:
- flex-start -- Default value. Items are positioned at the beginning of the container
- flex-end -- Items are positioned at the end of the container
- center -- Items are positioned in the center of the container
- space-between -- Items will have space between them
- space-around -- Items will have space before, between, and after them
- space-evenly -- Items will have equal space around them
Align-Items
In Flexbox, align-items controls the alignment of items on the Cross Axis.
- stretch Default. Items are stretched to fit the container
- center Items are positioned at the center of the container
- flex-start Items are positioned at the beginning of the container
- flex-end Items are positioned at the end of the container