CSS3 Flexbox

By,
Santosh

New layout concept in CSS3 that is Flexible boxes, or flexbox.
Use of flexbox for elements behave as our requirement when the page layout must integrate with different display devices and different screen sizes.
The flexible box model gives an best options over the block model and in that flexbox it does not use floats css property, or do not container's margins of its contents for many applications.

CSS3 Flexbox Concepts

Flexbox contains flex containers and flex items.

Flex container is define by setting the display property of an element to flex or inline-flex (display as inline).

Inside the flex container there is one or more flex items.

Everything inside a flex-item and outside a flex-container is display as usual. it defines how flex-items are shows inside a flex-container.

Inside flex-container, flex-items are positioned along with a flex line. By default in flex-container there is only one flex-line.

We can also possible change the  direction of the flex-line.

If we have to set the text direction property to right-to-left, then it drawn text right to left, and with that flex-line change the direction, so with that change the page layout also.

Flex Direction

Flex-direction property set the direction of the flex-items inside the flex-container. And the default value of flex-direction property is left-to-right and in small device top-to-bottom.

The flex-direction property values:

• Row-reverse      :- The flex-items was displayed right to left, then our writing direction is left to right.

• Column               :- The flex-items was displayed vertically on page, then our writing system is horizontal.

• Column-reverse :- The flex-items was displayed horizontal on page, then our writing system is vertically.

Justify-content

Whenever the items don’t use all space on flex-items, then Justify-content property horizontally aligns the items.

The Justify-content values :

• flex-start           :- it’s a default value. flex-items are placed at beginning of the container.

• Flex-end           :- flex-items are placed at end of the container.

• center               :- flex-items are placed at center of the container.

• space-between :- flex-items are placed with space between the lines.

• space-around   :- flex-items are placed with space between, before, and after the lines.

Align-items

Align-items property vertically aligns the flex-items when the items do not use all available space on the cross-axis.

The align-items values:
• stretch     :- this is the Default value. flex-items are stretched to fit in flex-container.
• flex-start :- flex-items are placed at the top of flex-container.
• flex-end   :- flex-items are placed at the bottom of flex-container.
• center      :- flex-items are placed at the center of flex-container.
• baseline   :- flex-items are placed at the baseline of flex-container.