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