Grille

Flexocss utilise un système de grille à 16 colonnes basé sur flexbox. Les largeurs des colonnes sont calculées automatiquement en tenant compte des gaps, pour que les layouts ne cassent jamais à cause des calculs d'espacement.

Container

Le .container centre le contenu et définit une largeur maximale de 1420px. Ajoutez .fluid pour un container pleine largeur sans limite.

HTML

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

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

Row

La .row crée un conteneur flex avec wrapping activé. Comme le container, elle a une largeur maximale de 1420px et se centre automatiquement.

HTML

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

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

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

.row — rangée flex avec wrap, max-width 1420px, centrée automatiquement.
.row.fluid — supprime le max-width, prend toute la largeur disponible.
.row.block — passe en direction colonne pour les layouts empilés.

Colonnes

Utilisez .fl-box avec .fl-{n} où n est une valeur de 1 à 16. Toutes les largeurs sont gap-aware : les calculs des colonnes soustraient la fraction appropriée du gap pour que le total s'adapte toujours parfaitement.

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>

Exemples

fl-4

fl-6

fl-10

fl-16

Largeur automatique

Utilisez .fl-auto pour que les colonnes partagent l'espace disponible également. Utile quand vous n'avez pas besoin d'un contrôle précis des colonnes.

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

Appliquez les classes gap sur la .row pour contrôler l'espacement entre les colonnes. Le pattern est .fl-{bp}-gap-{valeur} où la valeur va de 0 à 80 par pas de 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>

Les gaps sont responsive : utilisez des valeurs différentes par breakpoint. Les largeurs des colonnes s'ajustent automatiquement au gap, gardant le layout intact.

Comparaison des gaps

gap 0

fl-4

gap 16

fl-4

gap 32

fl-4

Offset

Poussez une colonne vers la droite avec .fl-offset-{n}. L'offset est gap-aware, il tient donc compte du gap de la rangée dans son calcul.

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

Les offsets sont aussi responsive. Utilisez .fl-{bp}-offset-{n} pour changer ou réinitialiser l'offset à différents breakpoints.

HTML

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

Imbrication

Placez une .row à l'intérieur d'un .fl-box pour créer des grilles imbriquées. Chaque rangée imbriquée obtient son propre contexte à 16 colonnes.

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

← Précédent Démarrer

Suivant → Gap & Area