Included in:
Not included in any file!
Depends from:
BuilderMixins.build-classes('align-content', align-content, $content-alignment)
BuilderMixins.build-classes('align-items', align-items, $item-alignment)
BuilderMixins.build-classes('align-self', align-self, $item-alignment)
BuilderMixins.build-classes('justify-content', justify-content, $content-alignment)
BuilderMixins.build-classes('justify-items', justify-items, $item-alignment)
BuilderMixins.build-classes('justify-self', justify-self, $item-alignment)
BuilderMixins.build-responsive-classes('align-content', align-content, $content-alignment)
BuilderMixins.build-responsive-classes('align-items', align-items, $item-alignment)
BuilderMixins.build-responsive-classes('align-self', align-self, $item-alignment)
BuilderMixins.build-responsive-classes('justify-content', justify-content, $content-alignment)
BuilderMixins.build-responsive-classes('justify-items', justify-items, $item-alignment)
BuilderMixins.build-responsive-classes('justify-self', justify-self, $item-alignment)
Local variables:
$content-alignment: (
"center" : center,
"start" : flex-start,
"end" : flex-end,
"between": space-between,
"around" : space-around,
"evenly" : space-evenly,
"stretch": stretch,
)
$item-alignment: (
"center" : center,
"start" : flex-start,
"end" : flex-end,
"stretch" : stretch,
"baseline": baseline,
)
component
Alignment
CSS Grid & Flexbox alignment helpers. Breakpoints modifiers
Rosetta includes justify-content, justify-items, justify-self, align-content, align-items, align-self helpers.
Usage:
| Prefixes | Suffix |
|---|---|
justify-content- align-content- |
center, start, end, between, around, evenly, stretch |
justify-items- align-items- justify-self- align-self- |
center, start, end, stretch, baseline |
Justify Content
| Class | Properties |
|---|---|
justify-content-center |
justify-content: center |
justify-content-start |
justify-content: flex-start |
justify-content-end |
justify-content: flex-end |
justify-content-between |
justify-content: space-between |
justify-content-around |
justify-content: space-around |
justify-content-evenly |
justify-content: space-evenly |
justify-content-stretch |
justify-content: stretch |
Justify Items
| Class | Properties |
|---|---|
justify-items-center |
justify-items: center |
justify-items-baseline |
justify-items: baseline |
justify-items-start |
justify-items: flex-start |
justify-items-end |
justify-items: flex-end |
justify-items-stretch |
justify-items: stretch |
Justify Self
| Class | Properties |
|---|---|
justify-self-center |
justify-self: center |
justify-self-baseline |
justify-self: baseline |
justify-self-start |
justify-self: flex-start |
justify-self-end |
justify-self: flex-end |
justify-self-stretch |
justify-self: stretch |
Align Content
| Class | Properties |
|---|---|
align-content-center |
align-content: center |
align-content-start |
align-content: flex-start |
align-content-end |
align-content: flex-end |
align-content-between |
align-content: space-between |
align-content-around |
align-content: space-around |
align-content-evenly |
align-content: space-evenly |
align-content-stretch |
align-content: stretch |
Align Items
| Class | Properties |
|---|---|
align-items-center |
align-items: center |
align-items-baseline |
align-items: baseline |
align-items-start |
align-items: flex-start |
align-items-end |
align-items: flex-end |
align-items-stretch |
align-items: stretch |
Align Self
| Class | Properties |
|---|---|
align-self-center |
align-self: center |
align-self-baseline |
align-self: baseline |
align-self-start |
align-self: flex-start |
align-self-end |
align-self: flex-end |
align-self-stretch |
align-self: stretch |