Flexbox
Some of the most used flexbox attributes and values is available
For make your container flex, you can use the attribute _display
, see more here about.
<div _display="flex">
<!-- Your content -->
</div>
<!-- Dont forget rows are flexboxes too -->
<div _row>
<!-- Your content -->
</div>
Direction
<div _display="flex" _direction="row"></div>
<!-- This is the default value-->
<div _display="flex" _direction="reverse"></div>
<div _display="flex" _direction="col"></div>
<div _display="flex" _direction="col reverse"></div>
Value |
Description |
row |
flex direction: row |
reverse |
flex direction: row-reverse |
col, column |
flex direction: column |
col reverse |
flex direction: column-reverse |
Wrap
<div _display="flex" _wrap="wrap"></div>
<!-- This is the default value-->
<div _display="flex" _wrap="nowrap"></div>
<div _display="flex" _wrap="reverse"></div>
Value |
Description |
wrap |
flex wrap: wrap |
nowrap |
flex wrap: nowrap |
reverse, wrap-reverse |
flex wrap: wrap-reverse |
Justify
<div _display="flex" _justify="start"></div>
<!-- This is the default value-->
<div _display="flex" _justify="end"></div>
<div _display="flex" _justify="center"></div>
<div _display="flex" _justify="around"></div>
<div _display="flex" _justify="between"></div>
<div _display="flex" _justify="evenly"></div>
Value |
Description |
start |
justify content: start |
end |
justify content: end |
center |
justify content: center |
around |
justify content: space-around |
between |
justify content: space-between |
evenly |
justify content: space-evenly |
Items
<div _display="flex" _items="stretch"></div>
<div _display="flex" _items="start"></div>
<div _display="flex" _items="end"></div>
<div _display="flex" _items="center"></div>
<div _display="flex" _items="baseline"></div>
Value |
Description |
stretch |
align items: stretch |
start |
align items: start |
end |
align items: end |
center |
align items: center |
baseline |
align items: baseline |
Content
<div _display="flex" _content="normal"></div>
<!-- This is the default value-->
<div _display="flex" _content="start"></div>
<div _display="flex" _content="end"></div>
<div _display="flex" _content="center"></div>
<div _display="flex" _content="between"></div>
<div _display="flex" _content="around"></div>
<div _display="flex" _content="evenly"></div>
<div _display="flex" _content="stretch"></div>
Value |
Description |
normal |
align content: normal |
start |
align content: start |
end |
align content: end |
center |
align content: center |
between |
align content: space-between |
around |
align content: space-around |
evenly |
align content: space-evenly |
stretch |
align content: stretch |