Utilities

Quick Flexbox tweaks, visibility controls, and responsive adjustments.

Luxa CSS provides a concise set of utility classes for quick HTML modifications, focusing on Flexbox properties, visibility controls, and responsive adjustments.

Visibility

Control element visibility across screen sizes:

ClassDescription
.hideHides elements on all screen sizes.
.hide-on-deskHides elements on desktop, visible on mobile.
.hide-on-mbHides elements on mobile, visible on desktop.

Flexbox

Quick Flexbox layout utilities:

ClassDescription
.flexEstablishes a flex container.
.flex-centerCenter-aligns items in a flex container.

Flexbox is a layout model that automatically arranges elements within a container depending on screen size, device type, and other factors. It enables the creation of complex and responsive layouts with simple CSS rules. To learn more, visit MDN Web Docs on Flexbox.

Flow Direction

Adjust the flow direction of your flex wrappers with these classes.

ClassDescription
.flow-column-wrapSets a column flow with wrapping.
.flow-column-nowrapSets a column flow without wrapping.
.flow-row-wrapSets a row flow with wrapping.
.flow-row-nowrapSets a row flow without wrapping.

Alignment

Align flex items effectively using these alignment utilities.

ClassDescription
.align-centerAligns items at the center.
.align-endAligns items at the end.
.align-startAligns items at the start.
.align-stretchStretches items to fit the container.

Justification

Justify content within your flex wrappers using these specific utilities.

ClassDescription
.justify-aroundDistributes space around items.
.justify-betweenDistributes space between items.
.justify-evenlyDistributes space evenly amongst items.
.justify-centerCenters items along the main axis.
.justify-endAligns items to the end of the container.
.justify-startAligns items to the start of the container.
Gap Management

Manage the spacing between flex items with gap utilities.

ClassDescription
.gap-01Applies a small gap between flex items.
.gap-02Applies a moderate gap.
.gap-03Applies a larger gap.
.gap-04Applies a significant gap.
.gap-05Applies a very large gap.
.gap-06Applies the largest gap.
.is-gaplessRemoves the gap between flex items.
Responsives

Adapt your layout to different screen sizes with responsive utilities.

ClassDescription
.hide-on-deskHides on desktop, visible on mobile.
.hide-on-mbHides on mobile, visible on desktop.
Usage example
<div class="flex flex-center flow-row-wrap justify-between gap-03">
  <div class="hide-on-mb">Desktop only</div>
  <div>Always visible</div>
  <div class="hide-on-desk">Mobile only</div>
</div>

This example creates a flexible, responsive layout with centered items, row flow, space-between justification, and medium gap. It also demonstrates visibility control for different screen sizes.