CSS Flexbox

What is Flexbox?

Flexbox (Flexible Box) is a layout model in CSS that makes it easier to design flexible and responsive layouts. It allows elements within a container to align and distribute space dynamically. The Flexbox model includes properties for both the container (the parent) and the items (the children) within it.

Flex Container Properties

• display: flex; - Defines a flex container and enables flexbox layout.
• flex-direction: Defines the direction of the flex items (row, column, row-reverse, column-reverse).
• justify-content: Aligns the items horizontally (start, center, space-between, space-around, space-evenly).
• align-items: Aligns the items vertically (flex-start, center, flex-end, stretch, baseline).
• align-self: Allows you to align individual items differently from the rest (auto, flex-start, center, flex-end, baseline, stretch).

Flexbox Example

Below is an example of a flex container with multiple flex items. The flex container has space-between distribution and aligns items in the center.

The items in the flex container will be spaced evenly. Modify the code to experiment with different flexbox properties!