CSS Flexbox Properties Showcase

This template demonstrates all CSS Flexbox properties with examples. Each section covers a specific property, its possible values, and a visual example.

Flex Container Properties

`display: flex`

Establishes a flex container, enabling flexbox layout for its children.

Item 1

Item 2

Item 3

`flex-direction`

Defines the main axis direction: row, row-reverse, column, column-reverse.

Item 1

Item 2

Item 3

`flex-wrap`

Controls whether items wrap to new lines: nowrap, wrap, wrap-reverse.

Item 1

Item 2

Item 3

Item 4

`flex-flow`

Shorthand for flex-direction and flex-wrap, e.g., row wrap.

Item 1

Item 2

Item 3

Item 4

`justify-content`

Aligns items along the main axis: flex-start, flex-end, center, space-between, space-around, space-evenly.

Item 1

Item 2

Item 3

`align-items`

Aligns items along the cross axis: stretch, flex-start, flex-end, center, baseline.

Item 1

Item 2

Item 3

`align-content`

Aligns flex lines when there’s extra space on the cross axis: flex-start, flex-end, center, space-between, space-around, space-evenly, stretch.

Item 1

Item 2

Item 3

Item 4

`gap`

Sets spacing between flex items: single value for all gaps or row-gap column-gap.

Item 1

Item 2

Item 3

Flex Item Properties

`order`

Controls the order of flex items (default is 0; negative or positive integers reorder items).

Item 1

Item 2

Item 3

`flex-grow`

Defines how much an item grows relative to others (default is 0).

Item 1

Item 2

Item 3

`flex-shrink`

Defines how much an item shrinks relative to others (default is 1).

Item 1

Item 2

Item 3

`flex-basis`

Sets the initial size of a flex item before growing/shrinking (e.g., auto, 100px, 50%).

Item 1

Item 2

Item 3

`flex`

Shorthand for flex-grow, flex-shrink, and flex-basis, e.g., flex: 1 1 auto.

Item 1

Item 2

Item 3

`align-self`

Overrides align-items for a specific item: auto, flex-start, flex-end, center, baseline, stretch.

Item 1

Item 2

Item 3