Griglia

Flexocss usa un sistema a griglia a 16 colonne basato su flexbox. Le larghezze delle colonne sono calcolate automaticamente tenendo conto dei gap, così i layout non si rompono mai per calcoli di spaziatura.

Container

Il .container centra il contenuto e imposta una larghezza massima di 1420px. Aggiungi .fluid per un container a larghezza piena senza limiti.

HTML

<!-- Centered, max-width 1420px -->
<div class="container">...</div>

<!-- Full width -->
<div class="container fluid">...</div>

Row

La .row crea un contenitore flex con wrapping attivo. Come il container, ha una larghezza massima di 1420px e si centra automaticamente.

HTML

<div class="row">...</div>

<div class="row fluid">...</div>

<div class="row block">...</div>

.row — riga flex con wrap, max-width 1420px, centrata automaticamente.
.row.fluid — rimuove il max-width, prende tutta la larghezza disponibile.
.row.block — passa a direzione colonna per layout impilati.

Colonne

Usa .fl-box con .fl-{n} dove n è un valore da 1 a 16. Tutte le larghezze sono gap-aware: i calcoli delle colonne sottraggono la frazione appropriata del gap così il totale si adatta sempre perfettamente.

HTML

<div class="row fluid fl-sm-gap-8">
  <div class="fl-box fl-4">4/16</div>
  <div class="fl-box fl-4">4/16</div>
  <div class="fl-box fl-4">4/16</div>
  <div class="fl-box fl-4">4/16</div>
</div>

Esempi

fl-4

fl-6

fl-10

fl-16

Larghezza automatica

Usa .fl-auto per far sì che le colonne condividano lo spazio disponibile in parti uguali. Utile quando non serve un controllo preciso delle colonne.

HTML

<div class="row fluid fl-sm-gap-8">
  <div class="fl-box fl-auto">Equal</div>
  <div class="fl-box fl-auto">Equal</div>
  <div class="fl-box fl-auto">Equal</div>
</div>

fl-auto

Gap

Applica le classi gap sulla .row per controllare la spaziatura tra le colonne. Il pattern è .fl-{bp}-gap-{valore} dove il valore va da 0 a 80 con step di 8.

HTML

<div class="row fluid fl-sm-gap-16 fl-lg-gap-24 fl-sp-gap-32">
  <div class="fl-box fl-8">...</div>
  <div class="fl-box fl-8">...</div>
</div>

I gap sono responsive: usa valori diversi per breakpoint. Le larghezze delle colonne si adattano automaticamente al gap, mantenendo il layout intatto.

Confronto gap

gap 0

fl-4

gap 16

fl-4

gap 32

fl-4

Offset

Spingi una colonna a destra usando .fl-offset-{n}. L'offset è gap-aware, quindi tiene conto del gap della riga nel calcolo.

HTML

<div class="row fluid fl-sm-gap-8">
  <div class="fl-box fl-8 fl-offset-4">Offset by 4</div>
  <div class="fl-box fl-4">No offset</div>
</div>

fl-8 fl-offset-4

fl-4

Anche gli offset sono responsive. Usa .fl-{bp}-offset-{n} per cambiare o resettare l'offset a breakpoint diversi.

HTML

<div class="fl-box fl-12 fl-offset-2 fl-lg-offset-0">
  Offset on mobile, no offset on tablet+
</div>

Nesting

Inserisci una .row dentro un .fl-box per creare griglie annidate. Ogni riga annidata ottiene il suo contesto a 16 colonne.

HTML

<div class="row fluid fl-sm-gap-8">
  <div class="fl-box fl-10">
    <div class="row fluid fl-sm-gap-8">
      <div class="fl-box fl-8">Nested 8/16</div>
      <div class="fl-box fl-8">Nested 8/16</div>
    </div>
  </div>
  <div class="fl-box fl-6">6/16</div>
</div>

Nested 8/16

6/16

← Precedente Inizia

Successivo → Gap & Area