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.
