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