Utilitaires

Flexocss inclut un large ensemble de classes utilitaires pour l'alignement, la visibilité, l'espacement, le positionnement et plus. Toutes les utilitaires supportent les préfixes responsive des breakpoints.

Alignement

Contrôlez comment les éléments flex sont positionnés le long des axes principal et transversal. Toutes les classes d'alignement supportent les préfixes de breakpoints : .fl-{bp}-justify-center, .fl-{bp}-align-items-end, etc.

justify-content

Classe	Propriété 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

Classe	Propriété 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

Classe	Propriété 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 est un raccourci qui combine justify-content: center et align-items: center pour un centrage rapide.

HTML

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

Visibilité

Affichez ou masquez des éléments avec un contrôle responsive. Toutes les classes de visibilité supportent les préfixes de breakpoints : .fl-{bp}-hidden, .fl-{bp}-visible, etc.

Classe	Propriété 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

Ajoutez du padding responsive à n'importe quel élément. Le pattern est .fl-{bp}-padding-{valeur}.

HTML

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

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

padding-8

padding-24

Area (padding vertical)

Les classes area appliquent du padding vertical (haut et bas) aux sections. 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">
  Responsive vertical padding
</section>

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

Alignement du texte

Contrôlez l'alignement du texte avec des préfixes responsive : .fl-{bp}-text-center, .fl-{bp}-text-left, etc.

Classe	Propriété 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>

Ordre

Changez l'ordre visuel des éléments flex sans modifier le HTML. Supporte les préfixes responsive : .fl-{bp}-order-{n}.

Classe	Propriété 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)

Position & fill

Utilitaires rapides de positionnement et dimensionnement :

Classe	Propriété 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

Contrôlez l'ordre d'empilement avec .z-index-{n} où n va de 0 à 10 par défaut. Configurable via $zIndex.

HTML

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

Reset marges & padding

Supprimez de force les marges ou le padding de n'importe quel élément :

Classe	Propriété 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

← Précédent Breakpoints

Suivant → Wireframe