Tagflexbox

[CSS] Un mega menu horizontal incremental avec flexbox (pure CSS)

Demo jsfiddle.net et code source zippé à télécharger.

Source HTML

Source CSS

[CSS] Alignements compliqués avec Flexbox

Sources:

Flexbox: centrer tous les éléments d’une rangée sauf le dernier qui sera aligné à droite

Source: Center and right align flexbox elements.

Method #3: Flex Auto Margins & Invisible Flex Item (pseudo-element) testée et fonctionne.

[Foundation 6] Une grille flexbox aux largeurs de colonnes custom avec les mixin flex-grid-size

Doc Foundation 6 – Flex Grid – @mixin flex-grid-size

Une rangée basée sur 8 colonnes

[Flexbox] Astuces et ressources utiles

Tutoriels Flexbox

Layout, mise en page

Mélanger largeurs fluides et fixes avec flex-grow

The “Holy Grail” 3 column liquid layout with pixel-widths.

Différentes astuces sur la manière de cibler les sélecteurs

Outils Flexbox

  • Flexplorer est un outil en ligne qui permet de jouer en live avec les valeurs du modèle Flexbox

Utiliser Flexbox avec des navIEgateurs de merde

Normalizing Cross-browser Flexbox Bugs

Source: Normalizing Cross-browser Flexbox Bugs.

flex-grow et flex-shrink craquent leurs slips sous IE10+

Il faut donner une largeur fixe (en %, ça ira très bien…) à l’élément sur lequel on a assigné la propriété flex-grow ou flex-shrink.

Ressources en ligne:

flexbox_without_flexbox-min

[CSS][jQuery] Un menu déroulant fondé sur flexbox (modèle tabulaire en fallback IE9-) et un sous-niveau centré horizontalement avec outerWidth

Avant de mettre en place cette solution, voir en bas de page les contraintes et choses restant à améliorer !!

Simulation : Menu déroulant Flexbox.

Pré-requis :

  • Le premier niveau doit occuper 100% de l’espace disponible en largeur,
  • les libellés de premier niveau ne doivent pas occuper un espace à largeur fixe (chaque libellé à une largeur en fonction de sa longueur),
  • les espaces entre les libellés de premier niveau doivent être strictement identiques,
  • les sous-niveau doivent être centrés horizontalement sur l’axe médian libellé de premier niveau > sous-niveau,
  • compatibilité navigateurs avec prise en charge ciblée des différents états de la spécification de Flexbox (ancienne et nouvelle) et fallback IE10-.

dropdown-flexbox

Quelques aspects techniques :

Remarques importantes pour la compatibilité cross-browsers :

  • Pour effectuer le switch entre vieille et nouvelle spécification Flexbox, les styles ont été déclarés dans l’ordre suivant :
    • 1. les propriétés propres à l’ancienne spécification avec les préfixes -webkit, -moz, -o, et sans préfixe :
    • 2. les propriétés propres à la nouvelle spécification avec un suffixe !important.
  • Ciblage CSS IE9, IE8 obtenu avec la mise en place de commentaires conditionnels dans la balise head de la page et de classes .ie8, .ie9 dans la CSS :

  • Ciblage CSS IE10 obtenu avec la mise en place de la méthode décrite ici : IE 10 Specific Styles.

Code jQuery à exécuter pour centrer les sous-menu par rapport aux largeurs des premiers niveaux

Cas particuliers et adaptation de code à apporter :

Dans le cas où les sous-menus ne sont pas correctement centrés par rapport à l’axe médian, lancer le bout de code jQuery seulement après que la page se soit entièrement chargée :

…ou mieux (sans le bind) :

Remarque à propos de la gestion des paddings par jQuery (notamment sous Chrome) : pour une raison obscure, la valeur du padding (+ 12 dans le calcul de la valeur servant à aligner le sous-menu sur l’axe médian du libellé de premier niveau) concourt à obtenir un alignement correct dans la simulation effectuée par le biais de JSFiddle, mais il a fallu la supprimer dans un autre cas de figure rencontré…

Décalage du sous-menu sous Chrome – appliquer la solution ci dessous :

Fallback IE9- en jQuery

Polyfill IE9- (non-testé – nécessite Selectivizr) : Flexie.js.

A améliorer : l’alignement vertical des libellés de 1er niveau n’est pas géré.

© 2020 devfrontend.info

Theme by Anders NorénUp ↑