Flexbox Playground

Description:
This property specifies how flex items are laid out in the flex container, by setting the direction of the flex container’s main axis.
They can be laid out in two main directions, like rows horizontally or like columns vertically.

Values:
row: Flex items are stacked in a row from left-to-right in ltr context.
row-reverse: Flex items are stacked in a row from right-to-left in ltr context.
column: Flex items are stacked in a column from top-to-bottom.
column-reverse: Flex items are stacked in a column from bottom-to-top

Description:
The initial flexbox concept is the container to set its items in one single line.
The flex-wrap property controls if the flex container lay out its items in single or multiple lines, and the direction the new lines are stacked in.

Values:
nowrap: Flex items are displayed in one row, by default they are shrunk to fit the flex container’s width.
wrap: Flex items are displayed in multiple rows if needed from left-to-right and top-to-bottom.
wrap-reverse: Flex items are displayed in multiple rows if needed from left-to-right and bottom-to-top.

Description:
The justify-content property aligns flex items along the main axis of the current line of the flex container.
It helps distribute left free space when either all the flex items on a line are inflexible, or are flexible but have reached their maximum size.

Values:
flex-start: Flex items are aligned to the left side of the flex container in ltr context.
flex-end: Flex items are aligned to the right side of the flex container in ltr context.
center: Flex items are aligned at the center of the flex container.
space-between: Flex items are displayed with equal spacing between them, first and last flex items are aligned to the edges of the flex container.
space-around: Flex items are displayed with equal spacing around every flex item, even the first and last flex items.

Description:
Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-content but in the perpendicular direction.
This property sets the default alignment for all flex items, including the anonymous ones.

Values:
stretch: Flex items fill the whole height (or width) from cross start to cross end of the flex container.
flex-start: Flex items are stacked to the cross start of the flex container.
flex-end: Flex items are stacked to the cross end of the flex container.
center: Flex items are stacked to the center of the cross axis of the flex container.
baseline: Flex items are aligned in a way that their baselines are aligned.

Description:
The align-content property aligns a flex container’s lines within the flex container when there is extra space in the cross-axis,
similar to how justify-content aligns individual items within the main-axis.

Values:
stretch: Flex items are displayed with distributed space after every row of flex items.
flex-start: Flex items are stacked toward the cross start of the flex container.
flex-end: Flex items are stacked toward the cross end of the flex container.
center: Rows of flex items are stacked in the center of the cross axis of the flex container.
space-between: Rows of flex items are displayed with equal spacing between them, first and last rows are aligned to the edges of the flex container.
space-around: Flex items are displayed with equal spacing around every row of flex items.