Jack in the flexbox

l'objet "Media"

Le célèbre "Objet Media" est un pattern CSS parfait pour Flexbox.

Il a déjà été traité par Philip Walton il y a quelques années.

La version que je propose se différencie par les points suivants :

ajout de min-width: 0 sur le flex-item pour éviter les effets de bord de la valeur autopar défaut

choix de flex-direction: row-reverse pour changer d'axe, plutôt que de cibler la figure et de modifier sa propriété order

l'objet "Autogrid"

Cousin germain de l'objet Media, qui fait les beaux jours de OOCSS, l'objet "Autogrid" a les particularités suivantes :

s'adapte automatiquement au nombre d'éléments enfants

chaque enfant est fluide, de même largeur et même hauteur par défaut

affichage sur une seule ligne (pas de saut de ligne prévu)

des gouttières précises sont possibles

Cette configuration est présente dans un nombre impressionnants de gabarits et de designs. Et elle ne nécessite que quelques déclarations en Flexbox !

Le lien CodePen : http://codepen.io/raphaelgoetter/pen/KMgBJd?editors=1100

alignements de formulaires parfaits.

La flexibilité du module Flexbox est particulièrement efficace au sein des éléments de formulaires.

Voyez comme un simple display: flex facilite la vie (ceci grâce à la propriété align-items valant "stretch" par défaut)

Un tunnel d'achat flexible

Ce module de 5 étapes est une simple liste numérotée (<ol><li>). L'étape en cours est marquée d'une classe ".is-current" et toutes les étapes suivantes sont semi-opacifiées.

Voici ce qui a été mis en oeuvre

Flexbox pour la disposition générale

flex:1 sur les </li><li> pour les répartir, ainsi que sur les li::after pour générer la ligne continue ou discontinue entre les étapes

CSS counters pour la génération et l'affichage des chiffres

pas de JavaScript ni d'images

compatibilité sur les navigateurs classiques (IE10+)

Une navigation RWD avec Flexbox

Voici aujourd'hui une Navigation "off Canvas" basée sur :

Flexbox pour la disposition

JavaScript pour le comportement "touch" et la génération du bouton de menu

CSS pour les styles et les transitions

À la Pinterest ?

Flexbox permet d'obtenir des alignements sous forme de colonnes, de manière assez semblable au module CSS3 columns.

Des formulaires fluides

La flexibilité apportée par Flexbox permet de réaliser des agencements complexes de même hauteur. Ici par exemple un textarea qui doit toujours occuper la même hauteur que le bloc de contenu situé à sa gauche.

Le principe repose essentiellement sur flex: 1, il suffisait d'y penser !

Marges automatiques

"Les marges automatiques, c'est pas automatique… mais c'est rudement pratique !"

En dehors du célébrissime margin: auto pour centrer horizontalement (et verticalement dans Flexbox), connaissiez-vous les bienfaits de margin-left: auto et margin-top: auto ? (que ce soit dans un contexte Flexbox ou non d'ailleurs)

Ces astuces vous permettront de réaliser très facilement quelques prouesses de positionnements en vous passant de flottants ou de positions absolues.

Ordonner une liste de tâche

La propriété order du module Flexbox permet de réordonner à sa guise les éléments. Il est ainsi aisément possible de créer une liste de tâches (todo list) et de classer les tâches par ordre d'importance.

(avec en bonus un peu de HTML5 Localstorage pour conserver la liste en mémoire)

Des blocs de même hauteur

J'avoue que c'était la démo la plus simple, et pour cause : dans Flexbox, les flex-items sont automatiquement de même hauteur car la valeur par défaut de align-items est stretch.

Et hop !

Un pied toujours collé en bas.

La flexibilité de la propriété flex s'applique également dans le sens vertical, on l'oublie parfois. Cela permet à un élément d'occuper toujours toute la hauteur disponible et de pousser un footer toujours en bas d'un bloc par exemple.

Des champs de formulaire fluides

Les formulaires HTML, et plus particulièrement les champs input comptent parmi les éléments les plus énervants à styler : ils disposent d'une largeur par défaut (qui n'est jamais celle qu'on souhaite) et ils ne peuvent pas être transformés en display: table-cell sur certains navigateurs.

Pour leur permettre d'être fluides, c'est à dire d'occuper "l'espace restant", il existe un moyen redoutablement simple et efficace : leur conférer un flex: 1 au sein d'un parent flexbox.

Du Responsive design sans Media Queries

Il est possible, grâce aux propriétés flex-grow, flex-shrink et flex-basis d'adapter du contenu à la taille de son parent, de faire en sorte des "Element Queries" sans avoir à modifier la taille de la fenêtre.

Un gabarit simple, fluide et responsive

Avec un zeste de min-height: 100vh; (compatible IE9+ et Android récents) pour occuper toute la hauteur du viewport, il est assez simple de réaliser un gabarit complètement fluide et responsive à l'aide de Flexbox, rien qu'en employant la déclaration flex: 1; sur les bons éléments.

Le pied de page étant bien entendu toujours collé en bas de page même si le contenu n'est pas suffisamment long.

Une grille responsive avec Flexbox

Flexbox offre la possibilité de réaliser des grilles de mise en forme de manière simple, avec gouttières, espaces laissés libres et sans problèmes de "whitespace" indésirables.

Plus d'information dans le billet le point sur les grilles

Le lien CodePen : http://codepen.io/raphaelgoetter/pen/mzKrh?editors=110

Il est possible d'aller plus loin avec un langage tel que LESS qui permettra de calculer un paquet de données automatiquement et de vous économiser beaucoup de code... et même de gagner en propreté dans votre HTML.

Une navigation responsive grâce à Flexbox

Le principe : le gabarit de cette navigation est réalisé à l'aide de Flexbox. Il est ainsi possible de disposer les parties principales aisément et de les réordonner à son aise.

Le bouton est un <button> généré en JavaScript uniquement sur petit écran, stylé et animé en CSS. L'événement de clic / touch est géré via JavaScript.

Un titre aux lignes discontinues

L'idée générale est d'afficher une barre horizontale décorative à gauche et à droite du texte d'un titre de largeur variable, la barre occupant toute la largeur.

Principe : grâce à un simple flex: 1 sur un pseudo-élément généré au sein du titre : h1::before, h1::after {content: ""; flex: 1;}