06 - CSS FlexBox.pdf

06. CSS FlexBox Justina Balsė The Flexbox Layout (Flexible Box) module The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment ca...

06. CSS FlexBox Justina Balsė The Flexbox Layout (Flexible Box) module The Flexible Box Module, usually referred to as flexbox, was designed as a one-dimensional layout model, and as a method that could offer space distribution between items in an interface and powerful alignment capabilities. 2 Terminologija 3 flex-container display: flex | inline-flex; flex-direction: row | row-reverse | column | column-reverse; flex-wrap: wrap | nowrap | wrap-reverse; flex-flow (shorthand for flex-direction and flex-wrap) justify-content (main axis): flex-start | flex-end | 4 center | space-between | space-around | space-evenly; align-items (cross axis ): flex-start | flex-end | center; flex-items order: ; flex-grow: ; flex-shrink: ; flex-basis: | auto; flex: shorthand for grow, shrink, and basis(default: 0 1 auto) 5 align-self: overrides alignment set on parent Žaidimas http://flexboxfroggy.com/ 6 Praktika (1) Tinklapio maketas su Flexbox. Duota: pritaikymo prie kelių ekranų pavyzdžiai. 7 Praktika (2) Pavyzdys Tinklapio maketas su Flexbox. Pritaikyti prie kelių ekranų, naudojant tik Flexbox parametrus. 8 Praktika (*) Tinklapio maketas su Flexbox. Pritaikyti prie kelių ekranų tik su Flexbox. 9 Praktika (*) Tinklapio maketas su Flexbox. Pritaikyti prie kelių ekranų, perrašant per Media Queries Flexbox ir kitus reikalingus 10 parametrus. Rezultato pavyzdžiai. Kartojimas - CSS Flexbox kursas (video medžaga) - A Complete Guide to Flexbox - Flexbox.help 11