Gap & Area

Flexocss fornisce tre utility di spaziatura complementari: gap controlla lo spazio tra le colonne di una row, padding aggiunge spaziatura interna a qualsiasi elemento, e area applica padding verticale alle sezioni. Tutte e tre supportano i prefissi responsive dei breakpoint.

Gap

Applica le classi gap a una .row per controllare la spaziatura tra le colonne. Il pattern è .fl-{bp}-gap-{valore}. Le larghezze delle colonne sono gap-aware: sottraggono automaticamente la frazione corretta del gap, così il layout non si rompe mai.

HTML

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

Valori di default: da 0 a 80px con step di 8. Configurabile tramite $gapStep e $gapNumber.

Confronto gap

gap 0

fl-4

gap 16

fl-4

gap 32

fl-4

Usa valori gap diversi per breakpoint per layout più compatti su mobile e più ariosi su desktop.

Padding

Aggiungi padding interno a qualsiasi elemento. Il pattern è .fl-{bp}-padding-{valore}. A differenza del gap, il padding funziona su qualsiasi elemento, non solo sulle row.

HTML

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

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

Confronto padding

padding-0

fl-sm-padding-0

padding-16

fl-sm-padding-16

padding-32

fl-sm-padding-32

padding-48

fl-sm-padding-48

Classe	Proprietà CSS
`.fl-{bp}-padding-0`	padding: 0
`.fl-{bp}-padding-8`	padding: 8px
`.fl-{bp}-padding-16`	padding: 16px
`.fl-{bp}-padding-24`	padding: 24px
`.fl-{bp}-padding-32`	padding: 32px
`...`	fino a 96px

Area

Le classi area applicano padding verticale (sopra e sotto) alle sezioni. Usale su elementi wrapper come <section> per creare un ritmo verticale coerente nella pagina. 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">
  <div class="container">
    <div class="row">
      ...
    </div>
  </div>
</section>

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

Confronto area

area-0

area-32

area-64

area-96

Classe	Proprietà CSS
`.fl-{bp}-area-0`	padding-top: 0; padding-bottom: 0
`.fl-{bp}-area-16`	padding-top: 16px; padding-bottom: 16px
`.fl-{bp}-area-32`	padding-top: 32px; padding-bottom: 32px
`.fl-{bp}-area-48`	padding-top: 48px; padding-bottom: 48px
`.fl-{bp}-area-64`	padding-top: 64px; padding-bottom: 64px
`...`	fino a 160px

Combina le classi area per breakpoint per creare sezioni più ariose su schermi grandi: fl-sm-area-32 fl-lg-area-64 fl-sp-area-96.

← Precedente Griglia

Successivo → Breakpoint