CSS :: Flex Box

CSS :: Flex Box

This articles has working examples of flex box

Flex Containers

flex-direction :: row (default) & Column

flex-direction | flex-wrap | flex-flow


justify-content is focused on main axis(row axis)

Below code shows the all examples of justify-cotent

Flex box : align-items

align-items focused on cross access(column)

align-items :: baseline


align-content determines the spacing between lines

align-items determines how the items as a whole are aligned within the container.

When there is only one line, align-content has no effect