🎉 Black Friday deal! 30% off your first year of CodyHouse Pro →

Projects

Progress value is 30%

Flexbox

The flexbox utility classes help you align content and create 2D layouts:

Class Description
.flex display: flex;
.inline-flex display: inline-flex;
.flex-wrap flex-wrap: wrap;
.flex-column flex-direction: column;
.flex-column-reverse flex-direction: column-reverse;
.flex-row flex-direction: row;
.flex-row-reverse flex-direction: row-reverse;
.flex-center justify-content: center; align-items: center;

Responsive - Edit the flexbox utility classes at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl).

Example:

Flex Items #

Class Description
.flex-grow flex-grow: 1;
.flex-grow-0 flex-grow: 0;
.flex-shrink flex-shrink: 1;
.flex-shrink-0 flex-shrink: 0;
.flex-basis-0 flex-basis: 0;

Responsive - Edit the flex item classes at specific breakpoints adding the @{breakpoint} suffix (@xs, @sm, @md, @lg, @xl).

Example:

<div class="[email protected]">
  <!-- ... -->
</div>

Flex Gap #

Set a gap among flex items using one of the .gap-{size} classes.

Use the .gap-y-{size}/.gap-x-{size} classes to modify only the vertical/horizontal gap (e.g., [email protected]).

Responsive - Use the .gap-{size}@{breakpoint} variations to modify the gap at a specific breakpoint (e.g., [email protected]).

Class Description
.gap-xxxxs set gap equal to var(--space-xxxxs)
.gap-xxxs set gap equal to var(--space-xxxs)
.gap-xxs set gap equal to var(--space-xxs)
.gap-xs set gap equal to var(--space-xs)
.gap-sm set gap equal to var(--space-sm)
.gap-md set gap equal to var(--space-md)
.gap-lg set gap equal to var(--space-lg)
.gap-xl set gap equal to var(--space-xl)
.gap-xxl set gap equal to var(--space-xxl)
.gap-xxxl set gap equal to var(--space-xxxl)
.gap-xxxxl set gap equal to var(--space-xxxxl)
.gap-0 set gap equal to 0px

Example:

✅ Project duplicated

✅ Project created

There was an error while trying to export your project. Please try again or contact us