ZUI — Flex

Display

.flexdisplay: flex

.inline-flexdisplay: inline-flex

.flex-centerdisplay: flex; align-items: center

.inline-flex-centerdisplay: inline-flex; align-items: center

.stackdisplay: flex; flex-direction: column

Direction

.flex-rowflex-direction: row

.flex-row-reverseflex-direction: row-reverse

.flex-columnflex-direction: column

.flex-column-reverseflex-direction: column-reverse

Wrap

.flex-wrapflex-wrap: wrap

.flex-nowrapflex-wrap: nowrap

.flex-wrap-reverseflex-wrap: wrap-reverse

Flex sizing

.flex-autoflex: 1 1 auto (with min-width/height: 0)

.flex-noneflex: none

.flex-shrinkflex-shrink: 0

.flex-growflex-grow: 1

Align items

.items-startalign-items: flex-start

.items-endalign-items: flex-end

.items-centeralign-items: center

.items-baselinealign-items: baseline

.items-stretchalign-items: stretch

Align self

.self-startalign-self: flex-start

.self-endalign-self: flex-end

.self-centeralign-self: center

.self-baselinealign-self: baseline

.self-stretchalign-self: stretch

Justify content

.justify-startjustify-content: flex-start

.justify-endjustify-content: flex-end

.justify-centerjustify-content: center

.justify-betweenjustify-content: space-between

.justify-aroundjustify-content: space-around

Align content

.content-startalign-content: flex-start

.content-endalign-content: flex-end

.content-centeralign-content: center

.content-betweenalign-content: space-between

.content-aroundalign-content: space-around

.content-stretchalign-content: stretch

Example

<nav class="flex items-center justify-between gap-md">
  <a href="/">Logo</a>
  <div class="flex gap-xs">
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </div>
</nav>

Stack

Use .stack as a shorthand for a vertical flex column:

<div class="stack gap-md">
  <h2>Title</h2>
  <p>Description</p>
  <button class="zui-button zui-button-variant-fill">Action</button>
</div>