Utility

Flexocss include un ampio set di classi utility per allineamento, visibilità, spaziatura, posizionamento e altro. Tutte le utility supportano i prefissi responsive dei breakpoint.

Allineamento

Controlla come gli elementi flex sono posizionati lungo l'asse principale e trasversale. Tutte le classi di allineamento supportano i prefissi dei breakpoint: .fl-{bp}-justify-center, .fl-{bp}-align-items-end, ecc.

justify-content

Classe	Proprietà CSS
`.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

Classe	Proprietà CSS
`.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

Classe	Proprietà CSS
`.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 è una scorciatoia che combina justify-content: center e align-items: center per centrare rapidamente.

HTML

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

Visibilità

Mostra o nascondi elementi con controllo responsive. Tutte le classi di visibilità supportano i prefissi dei breakpoint: .fl-{bp}-hidden, .fl-{bp}-visible, ecc.

Classe	Proprietà CSS
`.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

Aggiungi padding responsive a qualsiasi elemento. Il pattern è .fl-{bp}-padding-{valore}.

HTML

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

Valori di default: da 0 a 96px con step di 8. Configurabile tramite le variabili SCSS $paddingStep e $paddingNumber.

padding-8

padding-24

Area (padding verticale)

Le classi area applicano padding verticale (sopra e sotto) alle sezioni. Il pattern è .fl-{bp}-area-{valore}.

HTML

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

Valori di default: da 0 a 160px con step di 16. Configurabile tramite $gapStepArea e $gapNumberArea.

Allineamento testo

Controlla l'allineamento del testo con prefissi responsive: .fl-{bp}-text-center, .fl-{bp}-text-left, ecc.

Classe	Proprietà CSS
`.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>

Ordine

Cambia l'ordine visuale degli elementi flex senza modificare l'HTML. Supporta prefissi responsive: .fl-{bp}-order-{n}.

Classe	Proprietà CSS
`.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)

Posizione & fill

Utility rapide per posizionamento e dimensionamento:

Classe	Proprietà CSS
`.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

Controlla l'ordine di sovrapposizione con .z-index-{n} dove n va da 0 a 10 di default. Configurabile tramite $zIndex.

HTML

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

Reset margini & padding

Rimuovi forzatamente margini o padding da qualsiasi elemento:

Classe	Proprietà CSS
`.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

← Precedente Breakpoint

Successivo → Wireframe