How Flexbox CSS Properties Works ?

Published in

GlobalyHub

3 min readNov 22, 2017

First of all, flexbox is designed for layout (row and column) in one dimension. A new layout mode that provides an easy and clean way to arrange items within a container.

Here are some examples on how I use it :

Display

display: flex | flex-inline;

In a container, when

display: flex

is used, the container behaves as a block element and in

display: inline-flex

it behaves as an inline-block.

Flex Direction

flex-direction: row | row-reverse | column | column-reverse;

Flex Wrap

flex-wrap: nowrap | wrap | wrap-reverse;

Flex Flow

flex-flow: {flex-direction} {flex-wrap};

The flex-flow property is a shorthand property, combination of flex-direction and the flex-wrap properties.

Justify Content

justify-content: flex-start | flex-end | center | space-between | space-round;

This property controls the items of the container, horizontally.

Align Items

align-items: flex-start | flex-end | center | stretch | baseline;

This property is similar to justify-content and it aligns the items within the container.

Align Content

align-content: flex-start | flex-end | center | stretch | space-between | space-around;

Align Self

align-self: flex-start | flex-end | center | stretch | baseline;

This property is similar to align-items but the effect is applied individually to each item inside the container.

Flex Grow

flex-grow: 1;

The flex-grow property is only specified as a single number or decimal number (0–9). Negative number is invalid.

Flex Shrink

flex-shrink: 1;

The flex-shrink property is only specified as a single number or decimal number (0 - 9). Negative number is invalid. Flex-shrink works only when the width of item is wider than the container.