Gap & Area

Flexocss proporciona tres utilidades de espaciado complementarias: gap controla el espacio entre columnas de una row, padding añade espaciado interno a cualquier elemento, y area aplica padding vertical a las secciones. Las tres soportan prefijos de breakpoint responsive.

Gap

Aplica las clases gap en una .row para controlar el espaciado entre columnas. El patrón es .fl-{bp}-gap-{valor}. Los anchos de columna son gap-aware: restan automáticamente la fracción correcta del gap, por lo que el layout nunca se rompe.

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>

Valores por defecto: de 0 a 80px en pasos de 8. Configurable via $gapStep y $gapNumber.

Comparación gap

gap 0

fl-4

gap 16

fl-4

gap 32

fl-4

Usa valores de gap distintos por breakpoint para layouts más compactos en móvil y más espaciados en desktop.

Padding

Añade padding interno a cualquier elemento. El patrón es .fl-{bp}-padding-{valor}. A diferencia del gap, el padding funciona en cualquier elemento, no solo en rows.

HTML

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

Valores por defecto: de 0 a 96px en pasos de 8. Configurable via $paddingStep y $paddingNumber.

Comparación 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

Clase	Propiedad 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
`...`	hasta 96px

Area

Las clases area aplican padding vertical (arriba y abajo) a las secciones. Úsalas en elementos wrapper como <section> para crear un ritmo vertical coherente en la página. El patrón es .fl-{bp}-area-{valor}.

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>

Valores por defecto: de 0 a 160px en pasos de 16. Configurable via $gapStepArea y $gapNumberArea.

Comparación area

area-0

area-32

area-64

area-96

Clase	Propiedad 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
`...`	hasta 160px

Combina las clases area por breakpoint para secciones más espaciadas en pantallas grandes: fl-sm-area-32 fl-lg-area-64 fl-sp-area-96.

← Anterior Grid

Siguiente → Breakpoints