70-480: Creating flexible layouts with CSS3 (16 video)

- flexbox - elementas, į kurį sudėta nav, content ir sidebar. Visiems jiems galima nustatyti, kiek procentų kuriam skirti, pvz., 10 proc, 80 proc ir 10 proc.

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_flex.htm (atsidarinėti su IE naršykle)

- grid alignment - vietoje lentelių galime naudoti gridą, kuris taip pat turi eilutes, stulpelius. Taip daug paprasčiau nurodyti stilius.

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_grid.htm - kaip dirbti su ms-grid

-ms-grid-rows: [ auto | height | min-content | max-content | minmax(min, max) ] + | none

auto

The width of a column is computed based on the widest child element in that column. This keyword is equivalent to minmax(min-content, max-content).

width

The width of each column specified as one of the following values:

• A length consisting of an integer number, followed by an absolute units designator ("cm", "mm", "in", "pt", or "pc") or a relative units designator ("em", "ex", or "px").
• A percentage of the object width.
• A proportion of the remaining horizontal space (that is, the object width, less the combined widths of other tracks), consisting of an integer number followed by a fractional designator ("fr"). For example, if "200px 1fr 2fr" is specified, the first column is allocated 200 pixels, and the second and third columns are allocated 1/3 and 2/3 of the remaining width, respectively.

min-content

The minimum width of any child elements is used as the width of the column.

max-content

The maximum width of any child elements is used as the width of the column.

minmax(min, max)

The width of the row is between min and max, as available space allows. The min and max parameters can be any other value of the -ms-grid-columns property, except for auto.

none

Initial value. The object has no specified columns. Implicit, auto-sized columns will still be created based on the grid position(s) of the child element(s).

http://msdn.microsoft.com/en-us/library/windows/apps/hh466340.aspx

- multi-column - tekstą galima padalinti į kiek norime stulpelių...

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_multi-column.htm

- exclusions - darbas su SVG elementais

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_positionedfloats.htm - positioned floats

- regions - flox content of lox elements(?)

http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/hands-on_regions.htm
http://www.html5rocks.com/en/tutorials/regions/adobe/ - panaudoti SVG elementai

Rašant CSS vengti dublikavimo, t.y. grupuoti stilius

Daug pavyzdžių: http://ie.microsoft.com/testdrive/Graphics/hands-on-css3/

http://caniuse.com