Javascript Girl
  1. Javascript Girl
  3. Utilisation de la propriété 'order' pour positionner l'élément flexible entre les frères et sœurs
Intereting Posts
En utilisant html5 pour le téléchargement de fichiers avec ajax et jquery Silence net :: ERR_CONNECTION_REFUSED Un bon nom pour les versions flipées de `lt`,` lte`, `gt` et` gte`? Muting d'un élément audio HTML5 à l'aide d'un bouton personnalisé Performance de fermetures de Javascript Détecter la touche Entrée enfoncée à l'aide de javascript Passer un paramètre supplémentaire à un rappel de JSONP Débloquant Javascript Obtenir un mot sous la touche UIWebView en utilisant JavaScript Chaîne divisée en JavaScript en utilisant RegExp ignorant le délimiteur entre parenthèses Comment puis-je utiliser .toLocaleTimeString () sans affichage de secondes? Comment gérer le passage / retour des pointeurs de tableau vers le code compilé emscripten? Tainted Canvas, en raison de CORS et SVG? Ouvrez un nouvel onglet en javascript Quelle est la meilleure façon de créer un espace de noms JavaScript?

Utilisation de la propriété 'order' pour positionner l'élément flexible entre les frères et sœurs

J'ai une boîte à outils avec un ou trois éléments flexibles.

La disposition appropriée devrait ressembler à <div></div><h2></h2><div></div> dans la boîte à outils contenant.

J'ai un code pour que cela fonctionne (voir ceci ) uniquement si l'ordre de mise en page reste le même.

Ma question est la suivante: comment existe-t-il un moyen de s'assurer, si le balisage n'est pas toujours dans cet ordre (par exemple, un de mes collègues ne parvient pas à le faire correctement), comment puis-je le configurer pour que le <h2> obtienne toujours Affiché au milieu (ou le plus près possible dans le cas où il n'y a qu'un seul div et un h2).

Pour ce faire, j'ai fait usage de la propriété de l' order ; Cependant, je ne l'utilise pas à son plein potentiel ou c'est la mauvaise solution.

J'ai fait de cette jsfiddle comme terrain d'essai, mais il y a aussi cet exemple: 

 .diff-order { order: 2 } .diff-order:not(h2) { order: 1; } 
 .container { display: flex; } .container > * { flex: 1; /* KEY RULE */ border: 1px dashed red; } h2 { text-align: center; margin: 0; } .container > div { display: flex; } .diff-order { order: 2 } .diff-order:not(h2) { order: 1; } p { text-align: center;} p > span { background-color: aqua; padding: 5px; } 
 <div class="container"> <h2> I'm an h2 </h2> <div> <span>I'm a span</span> <span>I'm a span</span> </div> <div> <span>I'm a span</span> <span>I'm a span</span> </div> </div> <div class="container"> <h2 class="diff-order"> I'm an h2 </h2> <div class="diff-order"> <span>I'm a span</span> <span>I'm a span</span> </div> <div class="diff-order"> <span>I'm a span</span> <span>I'm a span</span> </div> </div>

Ce qu'il accomplit, c'est qu'il déplace le <h2> à la fin de la division contenant. J'essaie de voir s'il existe un moyen de définir l'ordre afin que <h2> soit toujours l'élément central. Peut-être que les pseudo-classes :before et :after peuvent être utilisées (peut-être comme remplacements pour les div autour de l'h2 …).

Je vous remercie.

Quand il y a trois éléments dans le conteneur:

  • Div
  • h2
  • Div

ET

  • L'ordre de ces éléments varie dans la source …

ET

  • Vous voulez que le h2 soit toujours au milieu …

Alors, vous pouvez faire quelque chose comme ça: 

 .container > div:first-of-type { order: 1; } .container > h2 { order: 2; } .container > div:last-of-type { order: 3; }

Cela se traduit par:

Indépendamment de l'ordre des éléments dans la source,

  • La première division apparaîtra d'abord dans l'ordre visuel
  • Le h2 apparaîtra deuxième dans l'ordre visuel
  • La deuxième division apparaîtra en dernier dans l'ordre visuel 
 .container { display: flex; } .container > * { flex: 1; border: 1px dashed red; } h2 { text-align: center; margin: 0; } .container > div:first-of-type { order: 1; } .container > h2 { order: 2; } .container > div:last-of-type { order: 3; } p { text-align: center;} p > span { background-color: aqua; padding: 5px; } 
 <div class="container"> <div> </div> <h2>I'm an h2</h2> <div> <span>I'm span 1</span> <span>I'm span 2</span> <span>I'm span 3</span> </div> </div> <div class="container"> <div> <span>I'm span 1</span> <span>I'm span 2</span> <span>I'm span 3</span> </div> <h2>I'm an h2</h2> <div> <span>I'm span 4</span> <span>I'm span 5</span> <span>I'm span 6</span> </div> </div> <div class="container"> <div> <span>I'm span 1</span> <span>I'm span 2</span> </div> <h2>I'm an h2</h2> <div> <span>I'm span 3</span> </div> </div> <div class="container"> <div> <span>I'm a span</span> <span>I'm a span</span> </div> <div> </div> <h2> I'm an h2 </h2> </div> <div class="container"> <div> <span>I'm a span</span> <span>I'm a span</span> </div> <h2> I'm an h2 </h2> </div> <div class="container"> <h2 class="diff-order"> I'm an h2 </h2> <div class="diff-order"> <span>I'm a span</span> <span>I'm a span</span> </div> <div class="diff-order"> <span>I'm a span</span> <span>I'm a span</span> </div> </div> <p><span>TRUE CENTER</span></p>