Utilidades

Flexocss incluye un amplio conjunto de clases de utilidad para alineación, visibilidad, espaciado, posicionamiento y más. Todas las utilidades soportan prefijos responsive de breakpoints.

Alineación

Controla cómo los elementos flex se posicionan a lo largo de los ejes principal y transversal. Todas las clases de alineación soportan prefijos de breakpoints: .fl-{bp}-justify-center, .fl-{bp}-align-items-end, etc.

justify-content

Clase	Propiedad CSS
`.justify-start`	justify-content: flex-start
`.justify-center`	justify-content: center
`.justify-end`	justify-content: flex-end
`.justify-between`	justify-content: space-between
`.justify-around`	justify-content: space-around
`.justify-evenly`	justify-content: space-evenly

justify-center

fl-4

justify-between

fl-4

align-items

Clase	Propiedad CSS
`.align-items-start`	align-items: flex-start
`.align-items-center`	align-items: center
`.align-items-end`	align-items: flex-end
`.align-items-stretch`	align-items: stretch
`.align-items-baseline`	align-items: baseline

align-items-center

Short

Tall

align-content

Clase	Propiedad CSS
`.align-content-start`	align-content: flex-start
`.align-content-center`	align-content: center
`.align-content-end`	align-content: flex-end
`.align-content-between`	align-content: space-between
`.align-content-around`	align-content: space-around
`.align-content-stretch`	align-content: stretch

place-center

.place-center es un atajo que combina justify-content: center y align-items: center para centrar rápidamente.

HTML

<div class="row fluid place-center" style="min-height:200px">
  <div class="fl-box fl-auto">Centered</div>
</div>

Visibilidad

Muestra u oculta elementos con control responsive. Todas las clases de visibilidad soportan prefijos de breakpoints: .fl-{bp}-hidden, .fl-{bp}-visible, etc.

Clase	Propiedad CSS
`.hidden`	display: none
`.visible`	display: initial
`.visible-block`	display: block
`.visible-flex`	display: flex
`.visible-inline`	display: inline
`.visible-inline-flex`	display: inline-flex

HTML

<!-- Hidden on mobile, visible from tablet -->
<div class="fl-sm-hidden fl-lg-visible">...</div>

<!-- Visible only on mobile -->
<div class="fl-lg-hidden">...</div>

<!-- Hidden until desktop, then show as flex -->
<div class="fl-sm-hidden fl-sp-visible-flex">...</div>

Padding

Agrega padding responsive a cualquier elemento. El patrón es .fl-{bp}-padding-{valor}.

HTML

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

Valores por defecto: de 0 a 96px en pasos de 8. Configurable mediante las variables SCSS $paddingStep y $paddingNumber.

padding-8

padding-24

Area (padding vertical)

Las clases area aplican padding vertical (arriba y abajo) a las secciones. 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">
  Responsive vertical padding
</section>

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

Alineación de texto

Controla la alineación del texto con prefijos responsive: .fl-{bp}-text-center, .fl-{bp}-text-left, etc.

Clase	Propiedad CSS
`.text-left`	text-align: left
`.text-center`	text-align: center
`.text-right`	text-align: right
`.text-justify`	text-align: justify

HTML

<!-- Center on mobile, left from tablet -->
<div class="fl-sm-text-center fl-lg-text-left">...</div>

Orden

Cambia el orden visual de los elementos flex sin modificar el HTML. Soporta prefijos responsive: .fl-{bp}-order-{n}.

Clase	Propiedad CSS
`.order-{n}`	order: n (-10 to 10)
`.order-first`	order: -9999
`.order-last`	order: 9999
`.order-reset`	order: 0

HTML

<div class="row fluid fl-sm-gap-8">
  <div class="fl-box fl-8 order-2">Second in HTML, shown second</div>
  <div class="fl-box fl-8 order-1">First in HTML, shown first</div>
</div>

<!-- Responsive: reorder on desktop -->
<div class="fl-box fl-8 fl-sp-order-last">Last on desktop</div>

order-2 (HTML first)

order-1 (HTML second)

Posición & fill

Utilidades rápidas de posicionamiento y dimensionamiento:

Clase	Propiedad CSS
`.position-relative`	position: relative
`.position-absolute`	position: absolute
`.position-fixed`	position: fixed
`.top-left`	top: 0; left: 0
`.top-right`	top: 0; right: 0
`.bottom-left`	bottom: 0; left: 0
`.bottom-right`	bottom: 0; right: 0
`.fill`	width: 100%; height: 100%
`.fill-width`	width: 100%
`.fill-height`	height: 100%
`.fill-vp`	width: 100vw; height: 100vh

Z-index

Controla el orden de apilamiento con .z-index-{n} donde n va de 0 a 10 por defecto. Configurable mediante $zIndex.

HTML

<div class="position-relative z-index-2">Above</div>
<div class="position-relative z-index-1">Below</div>

Reset márgenes & padding

Elimina forzosamente márgenes o padding de cualquier elemento:

Clase	Propiedad CSS
`.no-padding`	padding: 0
`.no-padding-top`	padding-top: 0
`.no-padding-bottom`	padding-bottom: 0
`.no-padding-left`	padding-left: 0
`.no-padding-right`	padding-right: 0
`.no-margin`	margin: 0
`.no-margin-top`	margin-top: 0
`.no-margin-bottom`	margin-bottom: 0
`.no-margin-left`	margin-left: 0
`.no-margin-right`	margin-right: 0

← Anterior Breakpoints

Siguiente → Wireframe