Summary  
This chapter introduces the CSS Flexible Box Layout (Flexbox) module, explaining how applying `display: flex` to a parent element makes it a flex container and enables aligning, ordering, and distributing its child items along horizontal and vertical axes.  

General domain of usage  
Responsive web layouts

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ä

Miksi Flexbox On Olemassa

Flexbox käytännössä