Eventival Styleguide / Utilities / Flexbox

Flexbox

We prepared various custom classes for flexbox as we widely use it across the all Eventival apps. Below you can find only the mostly used classes. If you want to see all of them refer to the utilities.css file.

Class	Effect
`df`	display: flex !important;
`inline-flex`	display: inline-flex !important;
`flex-column`	flex-direction: column !important;
`flex-row`	flex-direction: row !important;
`flex-wrap`	flex-wrap: wrap !important;
`items-center`	align-items: center !important;
`justify-between`	justify-content: space-between !important;
`flex-grow-1`	flex-grow: 1 !important;
`flex-keep-between`	flex-keep-between > *:last-child { margin-left: auto !important; } - for keeping the space-between when elements are wrapped

.flex-gap--*

We use flex-gap classes for combining alignment and spacing between (not at the end of last one) flex items, mostly for Buttons (see also Forms) and Tags.

To align a group of items to the left or right and keep a gap between them, use the flex-gap--left or flex-gap--right classes.

.flex-gap--left

  <div class="flex-gap--left mt4">
    <button type="button" class="btn btn--secondary-outline">Cancel editing</button>
    <button type="button" class="btn btn--primary">Save changes</button>
  </div>

.flex-gap--right

  <div class="flex-gap--right">
    <button type="button" class="btn btn--secondary-outline">Cancel editing</button>
    <button type="button" class="btn btn--primary">Save changes</button>
  </div>

If there are more items and the wrapping is likely, add also the flex-gap--mb class to add space between lines.

.flex-gap--left.flex-gap--mb

  <div class="flex-gap--left flex-gap--mb mt4">
    <button type="button" class="btn btn--primary">Action 1</button>
    <button type="button" class="btn btn--primary">Action 2</button>
    <button type="button" class="btn btn--primary">Action 3</button>
    <button type="button" class="btn btn--primary">Action 4</button>
    <button type="button" class="btn btn--primary">Action 5</button>
  </div>

You can also direct the items vertically by using the flex-gap--vertical class. No wrapping is expected in this case.

.flex-gap--vertical

  <div class="flex-gap--vertical">
    <button type="button" class="btn btn--secondary-outline">Cancel editing</button>
    <button type="button" class="btn btn--primary">Save changes</button>
  </div>