Repel

A simple layout pattern that pushes elements away from eachother, given the available space. Effectively implementing the .justify-between, .--gap-{z}, .flex, and .--row (as the default is horizontal orientation) classes.

Implementation

<div class="repel">
  ...
</div>

API

Custom propertyDefaultDescription
--layout-gap0Sets the gap of the targeted element
--layout-directionrowSets the flex-direction of the targeted element
--layout-aligncenterSets the align-items of the targeted element

Utility classes

Class nameRequired?Description
--gap-{z}Controls the --layout-gap API
--column/--rowControls the --layout-direction API
--start/--end/--center/--stretchControls the --layout-align API