Back to the list

Flexbox

Component using CSS flexbox.

File to include

@import "components/flexbox";

Item

Longer item

Item

Even longer item

<div class="flexbox" data-gap="l" data-direction="column-reverse" data-align="flex-end" data-justify="center">
</div>

Attributes

Name Example value Possible values Default Required
data-direction column "row" | "row-reverse" | "column" | "column-reverse" row No
data-wrap wrap "nowrap" | "wrap" | "wrap-reverse" nowrap No
data-align baseline "stretch" | "flex-start" | "flex-end" | "center" | "baseline" stretch No
data-justify flex-end "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "space-evenly" flex-start No
data-inline - - None No