stylebuilder Version: 1.1

Układ treści

Układ w flex i grid

Klasy ustawiające sposób wyświetlania elementów wewnątrz flex i grid.

`flex-direction`

Kontrolowanie układu elementów wewnątrz elementu wyświetlanego jako flex.

Klasa	Styl CSS
`flex-row`	`flex-direction: row;`
`flex-column`	`flex-direction: column;`
`flex-row-reverse`	`flex-direction: row-reverse;`
`flex-column-reverse`	`flex-direction: column-reverse;`

`flex-wrap`

Kontrolowanie zawijania elementów wewnątrz elementu wyświetlanego jako flex.

Klasa	Styl CSS
`flexwrap-no`	`flex-wrap: nowrap;`
`flexwrap-wrap`	`flex-wrap: wrap;`
`flexwrap-reverse`	`flex-wrap: wrap-reverse;`

`flexsize`

Kontrolowanie rozmiaru element wewnątrz elementu wyświetlanego jako flex.

Klasa	Styl CSS
`flexsize-1`	`flex: 1 1 0%;`
`flexsize-auto`	`flex: 1 1 auto;`
`flexsize-noshrink`	`flex: 1 0 auto;`
`flexsize-nogrow`	`flex: 0 1 auto;`
`flexsize-const`	`flex: none;`

`align-items`

Kontrolowanie wyrównania elementów wewnątrz flex i grid.

Klasa	Styl CSS
`items-start`	`aling-items: flex-start;`
`items-end`	`aling-items: flex-end;`
`items-center`	`aling-items: center;`
`items-baseline`	`aling-items: baseline;`
`items-stretch`	`aling-items: stretch;`

`justify-content`

Kontrolowanie justowania elementów wewnątrz flex i grid.

Klasa	Styl CSS
`justify-start`	`justify-content: flex-start;`
`justify-end`	`justify-content: flex-end;`
`justify-center`	`justify-content: center;`
`justify-baseline`	`justify-content: baseline;`
`justify-stretch`	`justify-content: stretch;`

`order`

Kontrolowanie kolejności elementu we flex i grid.

Klasa	Styl CSS
`order-first`	`order: -1;`
`order-last`	`order: 100;`
`order-unset`	`order: unset;`

`grid-template-columns`

Ustawienie szablonu kolumn dla elementu wyświetlanego jako grid.

Zapis <cols>to zapis deefinicji CSS grid-template-columns, gdzie spacje zamienione są na znak _.

Przykład

grid-cols-[100px_1f_100px]

Klasa	Styl CSS
`grid-cols-<int>`	`grid-template-columns: repeat(<int>, minmax(0, 1fr));`
`grid-cols-[<cols>]>`	`grid-template-columns: <cols>;`

`grid-template-rows`

Ustawienie szablonu wierszy dla elementu wyświetlanego jako grid.

Zapis <rows>to zapis deefinicji CSS grid-template-rows, gdzie spacje zamienione są na znak _.

Przykład

grid-rows-[100px_1f_100px]

Klasa	Styl CSS
`grid-rows-<int>`	`grid-template-rows: repeat(<int>, minmax(0, 1fr));`
`grid-rows-[<rows>]>`	`grid-template-rows: <rows>;`

`grid-row: span`

Łączenie wierszy w elemencie typu grid.

Klasa	Styl CSS
`span-row-<int>`	`grid-row: span <int>;`

`align-self`

Klasa	Styl CSS
`self-auto`	`align-self: auto;`
`self-normal`	`align-self: normal;`
`self-center`	`align-self: center;`
`self-start`	`align-self: start;`
`self-end`	`align-self: end;`
`self-self-start`	`align-self: self-start;`
`self-self-end`	`align-self: self-end;`
`self-flex-start`	`align-self: flex-start;`
`self-flex-end`	`align-self: flex-end;`
`self-anchor-center`	`align-self: anchor-center;`
`self-baseline`	`align-self: baseline;`
`self-first-baseline`	`align-self: first baseline;`
`self-last-baseline`	`align-self: last baseline;`
`self-stretch`	`align-self: stretch;`

`justify-self`

Klasa	Styl CSS
`justify-self-auto`	`justify-self: auto;`
`justify-self-normal`	`justify-self: normal;`
`justify-self-stretch`	`justify-self: stretch;`
`justify-self-center`	`justify-self: center;`
`justify-self-start`	`justify-self: start;`
`justify-self-end`	`justify-self: end;`
`justify-self-self-start`	`justify-self: self-start;`
`justify-self-self-end`	`justify-self: self-end;`
`justify-self-left`	`justify-self: left;`
`justify-self-anchor-center`	`justify-self: anchor-center;`
`justify-self-baseline`	`justify-self: baseline;`
`justify-self-first-baseline`	`justify-self: first baseline;`
`justify-self-last-baseline`	`justify-self: last baseline;`