Gap & Area

Flexocss fournit trois utilitaires d'espacement complémentaires : gap contrôle l'espace entre les colonnes d'une row, padding ajoute un espacement interne à n'importe quel élément, et area applique un padding vertical aux sections. Les trois supportent les préfixes de breakpoint responsive.

Gap

Appliquez les classes gap sur une .row pour contrôler l'espacement entre les colonnes. Le pattern est .fl-{bp}-gap-{valeur}. Les largeurs de colonnes sont gap-aware : elles soustraient automatiquement la fraction correcte du gap, ainsi le layout ne se casse jamais.

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>

Valeurs par défaut : de 0 à 80px par pas de 8. Configurable via $gapStep et $gapNumber.

Comparaison gap

gap 0

fl-4

gap 16

fl-4

gap 32

fl-4

Utilisez des valeurs de gap différentes par breakpoint pour des layouts plus compacts sur mobile et plus aérés sur desktop.

Padding

Ajoutez du padding interne à n'importe quel élément. Le pattern est .fl-{bp}-padding-{valeur}. Contrairement au gap, le padding fonctionne sur n'importe quel élément, pas seulement les rows.

HTML

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

Valeurs par défaut : de 0 à 96px par pas de 8. Configurable via $paddingStep et $paddingNumber.

Comparaison 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	Propriété 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
`...`	jusqu'à 96px

Area

Les classes area appliquent un padding vertical (haut et bas) aux sections. Utilisez-les sur des éléments wrapper comme <section> pour créer un rythme vertical cohérent sur la page. Le pattern est .fl-{bp}-area-{valeur}.

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>

Valeurs par défaut : de 0 à 160px par pas de 16. Configurable via $gapStepArea et $gapNumberArea.

Comparaison area

area-0

area-32

area-64

area-96

Classe	Propriété 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
`...`	jusqu'à 160px

Combinez les classes area par breakpoint pour des sections plus aérées sur grands écrans : fl-sm-area-32 fl-lg-area-64 fl-sp-area-96.

← Précédent Grille

Suivant → Breakpoints