Utilities
Quick Flexbox tweaks, visibility controls, and responsive adjustments.
On this page
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:
Class | Description |
---|---|
.hide | Hides elements on all screen sizes. |
.hide-on-desk | Hides elements on desktop, visible on mobile. |
.hide-on-mb | Hides elements on mobile, visible on desktop. |
Flexbox
Quick Flexbox layout utilities:
Class | Description |
---|---|
.flex | Establishes a flex container. |
.flex-center | Center-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.
Class | Description |
---|---|
.flow-column-wrap | Sets a column flow with wrapping. |
.flow-column-nowrap | Sets a column flow without wrapping. |
.flow-row-wrap | Sets a row flow with wrapping. |
.flow-row-nowrap | Sets a row flow without wrapping. |
Alignment
Align flex items effectively using these alignment utilities.
Class | Description |
---|---|
.align-center | Aligns items at the center. |
.align-end | Aligns items at the end. |
.align-start | Aligns items at the start. |
.align-stretch | Stretches items to fit the container. |
Justification
Justify content within your flex wrappers using these specific utilities.
Class | Description |
---|---|
.justify-around | Distributes space around items. |
.justify-between | Distributes space between items. |
.justify-evenly | Distributes space evenly amongst items. |
.justify-center | Centers items along the main axis. |
.justify-end | Aligns items to the end of the container. |
.justify-start | Aligns items to the start of the container. |
Gap Management
Manage the spacing between flex items with gap utilities.
Class | Description |
---|---|
.gap-01 | Applies a small gap between flex items. |
.gap-02 | Applies a moderate gap. |
.gap-03 | Applies a larger gap. |
.gap-04 | Applies a significant gap. |
.gap-05 | Applies a very large gap. |
.gap-06 | Applies the largest gap. |
.is-gapless | Removes the gap between flex items. |
Responsives
Adapt your layout to different screen sizes with responsive utilities.
Class | Description |
---|---|
.hide-on-desk | Hides on desktop, visible on mobile. |
.hide-on-mb | Hides 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.