Summary  
Flexbox is a CSS layout model that lets you implement code to control the alignment, distribution, and ordering of child elements within a container by applying `display: flex` and adjusting flex properties along horizontal and vertical axes.

General domain of usage  
Web user interface layout

Flexbox, short for Flexible Box Layout, is a CSS module designed to simplify the alignment, distribution, and organization of elements within a container.

Flexbox uses a **parent-child relationship**. The **parent** is called the **flex container**, which controls the layout. The **children** are called **flex items**, whose size, position, and order can be controlled using flexbox properties.

Flexbox behaves differently from block and inline elements. Unlike block elements, flex items do not stack vertically; they align in a row or column by default. Additionally, the margins at the edges of the container do not extend beyond its boundaries.

Note

## Flexbox in Action
Flexbox works by aligning items along the **axes** of the flex container. To enable Flexbox, simply apply the `display: flex;` property to the parent element. From there, you can customize how the items align and distribute within the container.

PGh0bWwgbGFuZz0iZW4iPgogIDxoZWFkPgogICAgPGxpbmsgcmVsPSJzdHlsZXNoZWV0IiBocmVmPSJpbmRleC5jc3MiIC8+CiAgPC9oZWFkPgogIDxib2R5PgogICAgPCEtLSBEZWZhdWx0IGRvY3VtZW50IGZsb3cgLS0+CiAgICA8aDQ+RGVmYXVsdDwvaDQ+CiAgICA8dWw+CiAgICAgIDxsaT5Mb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldC48L2xpPgogICAgICA8bGk+TG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQgY29uc2VjdGV0dXIuPC9saT4KICAgICAgPGxpPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LjwvbGk+CiAgICA8L3VsPgoKICAgIDwhLS0gQXBwbGllZCBmbGV4Ym94IC0tPgogICAgPGg0PkZsZXg8L2g0PgogICAgPHVsIGNsYXNzPSJsaXN0Ij4KICAgICAgPGxpPkxvcmVtIGlwc3VtIGRvbG9yIHNpdCBhbWV0LjwvbGk+CiAgICAgIDxsaT5Mb3JlbSBpcHN1bSBkb2xvciBzaXQgYW1ldCBjb25zZWN0ZXR1ci48L2xpPgogICAgICA8bGk+TG9yZW0gaXBzdW0gZG9sb3Igc2l0IGFtZXQuPC9saT4KICAgIDwvdWw+CiAgPC9ib2R5Pgo8L2h0bWw+

LyogQXBwbHkgYGZsZXhgIHRvIHRoZSBwYXJlbnQgZWxlbWVudC4KLyogSW4gdGhpcyBzaXR1YXRpb24sIGl0IGlzIHRoZSBgPHVsPmAgZWxlbWVudCB3aXRoIHRoZSBgbGlzdGAgY2xhc3MgbmFtZS4KKi8KLmxpc3QgewogIGRpc3BsYXk6IGZsZXg7Cn0KCi8qIEFkZCBgYm9yZGVyYCB0byB0aGUgaXRlbXMgb2YgdGhlIGZsZXggY29udGFpbmVyICovCi5saXN0IGxpIHsKICBib3JkZXI6IDFweCBzb2xpZCBmb3Jlc3RncmVlbjsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbiAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKfQ==

In what direction are the flex items arranged by default?

Learn how CSS brings structure and visual style to web pages by controlling layout, typography, spacing, and interactive states. Topics range from core styling concepts and selectors to the box model, Flexbox layouts, fonts, backgrounds, and decorative effects for building modern, responsive interfaces.

What Is Flexbox and Why Use It?

Flexbox in Action