Utilities

Flexocss includes a wide set of utility classes for alignment, visibility, spacing, positioning, and more. All utilities support responsive breakpoint prefixes.

Alignment

Control how flex items are positioned along the main and cross axes. All alignment classes support breakpoint prefixes: .fl-{bp}-justify-center, .fl-{bp}-align-items-end, etc.

justify-content

Class	CSS property
`.justify-start`	justify-content: flex-start
`.justify-center`	justify-content: center
`.justify-end`	justify-content: flex-end
`.justify-between`	justify-content: space-between
`.justify-around`	justify-content: space-around
`.justify-evenly`	justify-content: space-evenly

justify-center

fl-4

justify-between

fl-4

align-items

Class	CSS property
`.align-items-start`	align-items: flex-start
`.align-items-center`	align-items: center
`.align-items-end`	align-items: flex-end
`.align-items-stretch`	align-items: stretch
`.align-items-baseline`	align-items: baseline

align-items-center

Short

Tall

align-content

Class	CSS property
`.align-content-start`	align-content: flex-start
`.align-content-center`	align-content: center
`.align-content-end`	align-content: flex-end
`.align-content-between`	align-content: space-between
`.align-content-around`	align-content: space-around
`.align-content-stretch`	align-content: stretch

place-center

.place-center is a shortcut that combines justify-content: center and align-items: center for quick centering.

HTML

<div class="row fluid place-center" style="min-height:200px">
  <div class="fl-box fl-auto">Centered</div>
</div>

Visibility

Show or hide elements with responsive control. All visibility classes support breakpoint prefixes: .fl-{bp}-hidden, .fl-{bp}-visible, etc.

Class	CSS property
`.hidden`	display: none
`.visible`	display: initial
`.visible-block`	display: block
`.visible-flex`	display: flex
`.visible-inline`	display: inline
`.visible-inline-flex`	display: inline-flex

HTML

<!-- Hidden on mobile, visible from tablet -->
<div class="fl-sm-hidden fl-lg-visible">...</div>

<!-- Visible only on mobile -->
<div class="fl-lg-hidden">...</div>

<!-- Hidden until desktop, then show as flex -->
<div class="fl-sm-hidden fl-sp-visible-flex">...</div>

Padding

Add responsive padding to any element. The pattern is .fl-{bp}-padding-{value}.

HTML

<div class="fl-box fl-sm-padding-8 fl-lg-padding-16 fl-sp-padding-32">
  Responsive padding
</div>

Default values: 0 to 96px in steps of 8. Configurable via the SCSS variables $paddingStep and $paddingNumber.

padding-8

padding-24

Area (vertical padding)

Area classes apply vertical padding (top and bottom) to sections. The pattern is .fl-{bp}-area-{value}.

HTML

<section class="fl-sm-area-32 fl-lg-area-48 fl-sp-area-64 fl-mg-area-96">
  Responsive vertical padding
</section>

Default values: 0 to 160px in steps of 16. Configurable via $gapStepArea and $gapNumberArea.

Text alignment

Control text alignment with responsive prefixes: .fl-{bp}-text-center, .fl-{bp}-text-left, etc.

Class	CSS property
`.text-left`	text-align: left
`.text-center`	text-align: center
`.text-right`	text-align: right
`.text-justify`	text-align: justify

HTML

<!-- Center on mobile, left from tablet -->
<div class="fl-sm-text-center fl-lg-text-left">...</div>

Order

Change the visual order of flex items without modifying the HTML. Supports responsive prefixes: .fl-{bp}-order-{n}.

Class	CSS property
`.order-{n}`	order: n (-10 to 10)
`.order-first`	order: -9999
`.order-last`	order: 9999
`.order-reset`	order: 0

HTML

<div class="row fluid fl-sm-gap-8">
  <div class="fl-box fl-8 order-2">Second in HTML, shown second</div>
  <div class="fl-box fl-8 order-1">First in HTML, shown first</div>
</div>

<!-- Responsive: reorder on desktop -->
<div class="fl-box fl-8 fl-sp-order-last">Last on desktop</div>

order-2 (HTML first)

order-1 (HTML second)

Position & fill

Quick positioning and sizing utilities:

Class	CSS property
`.position-relative`	position: relative
`.position-absolute`	position: absolute
`.position-fixed`	position: fixed
`.top-left`	top: 0; left: 0
`.top-right`	top: 0; right: 0
`.bottom-left`	bottom: 0; left: 0
`.bottom-right`	bottom: 0; right: 0
`.fill`	width: 100%; height: 100%
`.fill-width`	width: 100%
`.fill-height`	height: 100%
`.fill-vp`	width: 100vw; height: 100vh

Z-index

Control stacking order with .z-index-{n} where n goes from 0 to 10 by default. Configurable via $zIndex.

HTML

<div class="position-relative z-index-2">Above</div>
<div class="position-relative z-index-1">Below</div>

Margin & padding reset

Force-remove margin or padding from any element:

Class	CSS property
`.no-padding`	padding: 0
`.no-padding-top`	padding-top: 0
`.no-padding-bottom`	padding-bottom: 0
`.no-padding-left`	padding-left: 0
`.no-padding-right`	padding-right: 0
`.no-margin`	margin: 0
`.no-margin-top`	margin-top: 0
`.no-margin-bottom`	margin-bottom: 0
`.no-margin-left`	margin-left: 0
`.no-margin-right`	margin-right: 0

← Previous Breakpoints

Next → Wireframe