Summary  
This chapter covers the CSS Flexible Box Layout (Flexbox) model, showing how applying `display: flex` to a container lets you align, distribute, and order its children along a single axis using properties like `flex-direction`, `justify-content`, `align-items`, and `gap` to simplify centering, spacing, and responsive behavior.  

General domain of usage  
Responsive web page layout design

Discover why Flexbox was introduced to CSS, and how it solves common layout challenges. This video explains the limitations of traditional layout methods and demonstrates the benefits of using Flexbox for modern web design.Use simple css examples. Do not provide full html document stucture. Focus on css mainly

Flexbox, lyhenne sanoista Flexible Box Layout, on CSS-moduuli, joka on suunniteltu helpottamaan elementtien kohdistamista, jakamista ja järjestämistä säiliön sisällä.

Flexbox perustuu **vanhempi-lapsi-suhteeseen**. **Vanhempi** on nimeltään **flex-säiliö**, joka hallitsee asettelua. **Lapset** ovat **flex-elementtejä**, joiden kokoa, sijaintia ja järjestystä voidaan hallita flexbox-ominaisuuksilla.

Flexbox käyttäytyy eri tavalla kuin block- ja inline-elementit. Toisin kuin block-elementit, flex-elementit eivät asetu pystysuoraan päällekkäin; ne asettuvat oletuksena riviin tai sarakkeeseen. Lisäksi säiliön reunojen marginaalit eivät ylitä sen rajoja.

Huomio

## Flexbox käytännössä
Flexbox toimii kohdistamalla elementit flex-säiliön **akseleille**. Flexbox otetaan käyttöön lisäämällä vanhemmalle elementille `display: flex;` -ominaisuus. Tämän jälkeen voit mukauttaa, miten elementit kohdistuvat ja jakautuvat säiliön sisällä.

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

LyogQXBwbHkgYGZsZXhgIHRvIHRoZSBwYXJlbnQgZWxlbWVudC4KLyogSW4gdGhpcyBzaXR1YXRpb24sIGl0IGlzIHRoZSBgPHVsPmAgZWxlbWVudCB3aXRoIHRoZSBgbGlzdGAgY2xhc3MgbmFtZS4KKi8KLmxpc3QgewogIGRpc3BsYXk6IGZsZXg7Cn0KCi8qIEFkZCBgYm9yZGVyYCB0byB0aGUgaXRlbXMgb2YgdGhlIGZsZXggY29udGFpbmVyICovCi5saXN0IGxpIHsKICBib3JkZXI6IDFweCBzb2xpZCBmb3Jlc3RncmVlbjsKfQoKLyogUmVtb3ZlIGRlZmF1bHQgZGVjb3JhdGlvbiAqLwp1bCB7CiAgbGlzdC1zdHlsZTogbm9uZTsKfQ==

Missä suunnassa flex-elementit järjestetään oletuksena?

Muotoile verkkosivuja CSS:n avulla. Käytä värejä, typografiaa, välistyksiä ja asetteluja sekä rakenna responsiivisia komponentteja Flexboxilla.

Miksi Flexbox On Olemassa

Flexbox käytännössä