Flexbox

Visual examples with all the CSS properties related to Flexbox

01. display: flex; + justify-content: center;

Parent properties to align horizontal elements to the right, left, center or distribute them inside the container.

&:nth-child(1)

&:nth-child(2)

&:nth-child(3)

&:nth-child(4)

The blue border is the representation of the Flex Container, holding the parent properties:


                        display: flex;
                        justify-content: center;

02. display: flex; + flex-direction: row-reverse;

Parent properties for aligning elements to the right, left, top or bottom of the container

&:nth-child(1)

&:nth-child(2)

&:nth-child(3)

&:nth-child(4)

The blue border is the representation of the Flex Container, holding the parent properties:


                        display: flex;
                        flex-direction: row-reverse;

03. display: flex; + flex-direction: row;

Parent properties for aligning elements to the right, left, top or bottom of the container

&:nth-child(1)

&:nth-child(2)

&:nth-child(3)

&:nth-child(4)

The blue border is the representation of the Flex Container, holding the parent properties:


                        display: flex;
                        flex-direction: row;

04. display: flex; + justify-content: space-between;

Parent properties to align horizontal elements to the right, left, center or distribute them inside the container.

&:nth-child(1)

&:nth-child(2)

&:nth-child(3)

&:nth-child(4)

The blue border is the representation of the Flex Container, holding the parent properties:


                        display: flex;
                        justify-content: space-between;

05. display: flex; + flex-flow: column;

Parent properties for aligning elements horizontally (to right or to the left) and vertically (to the top or to the bottom)

&:nth-child(1)

&:nth-child(2)

&:nth-child(3)

&:nth-child(4)

The blue border is the representation of the Flex Container, holding the parent properties:


                        display: flex;
                        flex-flow: column;

06. display: flex; + align-items: center; + justify-content: center;

Parent properties for aligning elements to center of the taller item and to the content wrapper

&:nth-child(1)

&:nth-child(2)

&:nth-child(3)

&:nth-child(4)

The blue border is the representation of the Flex Container, holding the parent properties:


                        display: flex;
                        align-items: center;
                        justify-content: center;

07. display: flex; + align-items: flex-end; + justify-content: space-around;

Parent properties for aligning elements to the bottom of the container and distribute them around the available space

&:nth-child(1)

&:nth-child(2)

&:nth-child(3)

&:nth-child(4)

The blue border is the representation of the Flex Container, holding the parent properties:


                        display: flex;
                        align-items: flex-end;
                        justify-content: space-around;

08. display: flex; + align-items: flex-startr; + justify-content: center;

Parent properties for aligning elements to the top of the container

&:nth-child(1)

&:nth-child(2)

&:nth-child(3)

&:nth-child(4)

The blue border is the representation of the Flex Container, holding the parent properties:


                        display: flex;
                        align-items: center;
                        justify-content: center;

09. display: flex; + align-items: stretch; + justify-content: center;

Parent properties to vertically fulfill the container

&:nth-child(1)

&:nth-child(2)

&:nth-child(3)

&:nth-child(4)

The blue border is the representation of the Flex Container, holding the parent properties:


                        display: flex;
                        align-items: stretch;
                        justify-content: center;