Mechanics ebook

CSS Flexbox Guide

A complete reference for mastering CSS Flexbox layout.

Download PDF
Quizerland

CSS Flexbox Guide

What's inside

1 Display Flex

The `display: flex` property enables flexbox layout, allowing flexible arrangement of child elements.

2 Flex Direction

The `flex-direction` property defines the main axis direction, such as row or column.

3 Justify Content

The `justify-content` property aligns items along the main axis, distributing space between them.

4 Align Items

The `align-items` property aligns flex items along the cross axis within a flex container.

5 Align Self

The `align-self` property allows individual flex items to override the `align-items` setting.

6 Flex Wrap

The `flex-wrap` property controls whether flex items stay on one line or wrap onto multiple lines.

7 Flex Grow

The `flex-grow` property defines how much a flex item should grow relative to others.

8 Flex Shrink

The `flex-shrink` property specifies how much a flex item should shrink if space is limited.

9 Flex Basis

The `flex-basis` property sets the initial size of a flex item before it grows or shrinks.

10 Gap

The `gap` property defines the space between flex items without using margins.