Quick Flexbox tweaks, visibility controls, and responsive adjustments.

Luxa has a small and simple collection of utility classes designed for quick modifications to HTML.

These utilities can be convenient, with accessible Flexbox properties, visibility controls, and simple media query-based responsiveness.


Control the visibility of elements across different screen sizes using these utility classes.

Class NameDescriptionProperties / Media Query
.hideHides elements on all screen sizes.display: none; visibility: hidden;
.hide-on-deskHides elements on desktop, visible on mobile.@media (max-width: $breakpoint) { display: none; visibility: hidden; } on desktop.
{ display: block; visibility: visible; } on mobile.
.hide-on-mbHides elements on mobile, visible on desktop.@media (max-width: $breakpoint) { display: none; visibility: hidden; } on mobile.
{ display: block; visibility: visible; } on desktop.


Utilize these Flexbox utilities to establish flexible and responsive layouts quickly.

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.

Class NameDescriptionProperties
.flexEstablishes a flex container.display: flex;
.flex-centerCenter-aligns items in a flex container.display: flex; align-items: center; justify-content: center;

Flow Direction

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

Class NameDescriptionProperties
.flow-column-wrapSets a column flow with wrapping.flex-direction: column; flex-wrap: wrap;
.flow-column-nowrapSets a column flow without wrapping.flex-direction: column; flex-wrap: nowrap;
.flow-row-wrapSets a row flow with wrapping.flex-direction: row; flex-wrap: wrap;
.flow-row-nowrapSets a row flow without wrapping.flex-direction: row; flex-wrap: nowrap;

Align flex items effectively using these alignment utilities.

Class NameDescriptionProperties
.align-centerAligns items at the center.align-items: center;
.align-endAligns items at the end.align-items: flex-end;
.align-startAligns items at the start.align-items: flex-start;
.align-stretchStretches items to fit the container.align-items: stretch;

Justify content within your flex wrappers using these specific utilities.

Class NameDescriptionProperties
.justify-aroundDistributes space around items.justify-content: space-around;
.justify-betweenDistributes space between items.justify-content: space-between;
.justify-evenlyDistributes space evenly amongst items.justify-content: space-evenly;
.justify-centerCenters items along the main axis.justify-content: center;
.justify-endAligns items to the end of the container.justify-content: flex-end;
.justify-startAligns items to the start of the container.justify-content: flex-start;
Gap Management

Manage the spacing between flex items with gap utilities.

Class NameDescriptionProperties
.gap-01Applies a small gap between flex items.gap: var(--space-01);
.gap-02Applies a moderate gap.gap: var(--space-02);
.gap-03Applies a larger gap.gap: var(--space-03);
.gap-04Applies a significant gap.gap: var(--space-04);
.gap-05Applies a very large gap.gap: var(--space-05);
.gap-06Applies the largest gap.gap: var(--space-06);
.is-gaplessRemoves the gap between flex items.gap: 0;

Adapt your layout to different screen sizes with responsive utilities.

Class NameDescriptionMedia Query
.hide-on-deskHides on desktop, visible on mobile.@media (max-width: $breakpoint)
.hide-on-mbHides on mobile, visible on desktop.@media (max-width: $breakpoint)