CSS flexbox

Simuratli

Oct 21, 2020

CSS flexboxes are modern css layout that help us to order elements vertical and horizontal.

Why flexbox?

It is easier to make responsive our website with flexbox.
Flex structure is simple.
Flexbox supported by all browsers today.

How to use Flexbox:

There are 2 main item in flexbox. First Container , second Items.

Display

Using display:flex we make our container flexible.

.container{display: flex /* or inline-flex */}

Flex Direction

Flex direction used to determine how items arranged in layout(horizontal or vertical) and applied to the container element.

.container{
display: flex /* or inline-flex*/
flex-direction: row /* or  | row-reverse | column | column-reverse */;
}

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.

Justify-content

It defines the alignment along the main axis.

Align-items

It help us alignment of items in y-axis.