Flex boxes;
CSS flexboxes are modern CSS layout that help us to order elements vertical and horizontal.
It's easier to make responsive our website with flex box. Flex supported by all browser today.
There are 2 main item in flexbox. First Container,
second Items.
Display property:
Using display:flex we make our container flexible.
Flex direction:
used to determine how items arranged in layout(horizontal or vertical) and applied to the container element.
*row (default): standard layout from left to right
*row-reverse: reverse layout from right to left
*column: From top to bottom layout
*column-reverse: From bottom to top layout
Flex-wrap:
Flex-wrap mostly used for creating responsive layouts. The flex-wrap property is specified as a single keyword chosen from the list of values below.
*nowrap (default): All elements are in 1 row.This is the default value.
*wrap: The flex items break into multiple lines.
*wrap-reverse: Behaves the same as wrap but it have reverse order.
flex-flow:
is for setting both the flex-direction and flex-wrap properties in one command.
Justify-content:
It defines the alignment along the main axis.
Align-items:
It help us alignment of items in y-axis.
means
The order Property:
The order property specifies the order of the flex items.it means we can change the order of flex item according to our needs.
The flex-grow Property:
The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.
The value must be a number, default value is 0.
The flex-shrink Property:
The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items. The value must be a number, default value is 1.
The flex-basis Property:
The flex-basis property specifies the initial length of a flex item.
The flex Property:
The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.
That's all for now I'll share more in my upcoming posts.
Thank for reading:)
Top comments (0)