Display

The display elements include block, flex, alignment, sizing, order, position, overflow utilities, each with the option of including modifier classes for responsive design. All of the utilities are disabled by default and can be enabled in the configuration.scss document as described below.

Utilities (anchor)

The following provides compiled CSS of the utilities available, the optional responsive modifiers are explained further below.

Block (anchor)

With $enable-block: true;

Block CSS

.block {
  display: block;
}

.block-inline {
  display: inline-block;
}

Flex (anchor)

With $enable-flex: true;

Flex CSS

.flex {
  display: flex;
}

.flex-inline {
  display: inline-flex;
}

.f-row {
  flex-direction: row;
}

.f-column {
  flex-direction: column;
}

.f-wrap {
  flex-wrap: wrap;
}

.f-wrap-none {
  flex-wrap: nowrap;
}

.f-grow-0 {
  flex-grow: 0;
}

.f-grow-1 {
  flex-grow: 1;
}

.f-shrink-0 {
  flex-shrink: 0;
}

.f-shrink-1 {
  flex-shrink: 1;
}

Alignment (anchor)

With $enable-alignment: true;

Alignment CSS

.pc-f-start {
  place-content: flex-start;
}

.pc-f-end {
  place-content: flex-end;
}

.pc-start {
  place-content: start;
}

.pc-end {
  place-content: end;
}

.pc-center {
  place-content: center;
}

.pc-space-around {
  place-content: space-around;
}

.pc-space-between {
  place-content: space-between;
}

.pc-space-evenly {
  place-content: space-evenly;
}

.jc-f-start {
  justify-content: flex-start;
}

.jc-f-end {
  justify-content: flex-end;
}

.jc-start {
  justify-content: start;
}

.jc-end {
  justify-content: end;
}

.jc-center {
  justify-content: center;
}

.jc-space-around {
  justify-content: space-around;
}

.jc-space-between {
  justify-content: space-between;
}

.jc-space-evenly {
  justify-content: space-evenly;
}

.ac-f-start {
  align-content: flex-start;
}

.ac-f-end {
  align-content: flex-end;
}

.ac-start {
  align-content: start;
}

.ac-end {
  align-content: end;
}

.ac-center {
  align-content: center;
}

.ac-space-around {
  align-content: space-around;
}

.ac-space-between {
  align-content: space-between;
}

.ac-space-evenly {
  align-content: space-evenly;
}

.ai-f-start {
  align-items: flex-start;
}

.ai-f-end {
  align-items: flex-end;
}

.ai-start {
  align-items: start;
}

.ai-end {
  align-items: end;
}

.ai-center {
  align-items: center;
}

.as-f-start {
  align-self: flex-start;
}

.as-f-end {
  align-self: flex-end;
}

.as-start {
  align-self: start;
}

.as-end {
  align-self: end;
}

.as-center {
  align-self: center;
}

Sizes (anchor)

With $enable-sizing: true;

Sizes CSS

.w-auto {
  width: auto;
}

.w-100 {
  width: 100%;
}

.w-100-min {
  min-width: 100%;
}

.w-100-max {
  max-width: 100%;
}

.w-100vw {
  width: 100vw;
}

.w-calc {
  width: calc(100vw - var(--width));
}

.h-auto {
  height: auto;
}

.h-100 {
  height: 100%;
}

.h-100-min {
  min-height: 100%;
}

.h-100-max {
  max-height: 100%;
}

.h-100vh {
  height: 100vh;
}

.h-calc {
  height: calc(100vh - var(--height));
}

Order (anchor)

With $enable-order: true;

Order CSS

.order-0 {
  order: 0;
}

.order-1 {
  order: 1;
}

.order-2 {
  order: 2;
}

.order-3 {
  order: 3;
}

.order-4 {
  order: 4;
}

.order-5 {
  order: 5;
}

Position (anchor)

With $enable-position: true;

Position CSS

.pos-unset {
  position: unset;
}

.relative {
  position: relative;
}

.absolute {
  position: absolute;
}

.fixed {
  position: fixed;
}

.sticky {
  position: sticky;
}

.top {
  --top: 0;
  inset-block-start: var(--top);
}

.bottom {
  --bottom: 0;
  inset-block-end: var(--bottom);
}

.left {
  --left: 0;
  inset-inline-start: var(--left);
}

.right {
  --right: 0;
  inset-inline-end: var(--right);
}

.top-unset {
  inset-block-start: unset;
}

.bottom-unset {
  inset-block-end: unset;
}

.left-unset {
  inset-inline-start: unset;
}

.right-unset {
  inset-inline-end: unset;
}

.z-n {
  z-index: -1;
}

.z-0 {
  z-index: 0;
}

.z-1 {
  z-index: 1;
}

.z-2 {
  z-index: 2;
}

.z-3 {
  z-index: 3;
}

.z-4 {
  z-index: 4;
}

Overflow (anchor)

With $enable-overflow: true;

Overflow CSS

.overflow-x-unset {
  overflow-x: unset;
}

.overflow-y-unset {
  overflow-y: unset;
}

.overflow-x-auto {
  overflow-x: auto;
}

.overflow-y-auto {
  overflow-y: auto;
}

.overflow-x-scroll {
  overflow-x: scroll;
}

.overflow-y-scroll {
  overflow-y: scroll;
}

.scroll-stable-unset {
  scrollbar-gutter: unset;
}

.scroll-stable {
  scrollbar-gutter: stable;
}

.scroll-contain {
  overscroll-behavior: contain;
}

.scrollbar-thin {
  scrollbar-width: thin;
}

Responsive modifiers (anchor)

All the utilities above have the option for including responsive modifiers for each using the Themalize breakpoints. The following uses the block utility to demonstrate the class names provided for each breakpoint.

.block
.block-xl
.block-lg
.block-md
.block-sm
.block-xs

So with both $enable-block and $enable-block-bp set to true the utilities will be compiled as follows.

Block CSS responsive modifiers

.block {
  display: block;
}

.block-inline {
  display: inline-block;
}

@media (max-width: 1601px) {
  .block-xl {
    display: block;
  }
  .block-inline-xl {
    display: inline-block;
  }
}

@media (max-width: 1281px) {
  .block-lg {
    display: block;
  }
  .block-inline-lg {
    display: inline-block;
  }
}

@media (max-width: 1025px) {
  .block-md {
    display: block;
  }
  .block-inline-md {
    display: inline-block;
  }
}

@media (max-width: 769px) {
  .block-sm {
    display: block;
  }
  .block-inline-sm {
    display: inline-block;
  }
}

@media (max-width: 481px) {
  .block-xs {
    display: block;
  }
  .block-inline-xs {
    display: inline-block;
  }
}