Flexbox peut-il réaliser une réorganisation dynamique sans compromettre le référencement ?

Réorganisation CSS uniquement avec Flexbox

Défi :

Maintenir un moteur de recherche - structure DOM conviviale et sémantique tout en présentant les éléments dans des positions spécifiques sans duplication inutile.

Exigences de mise en page :

• Mise en page basée sur Flexbox avec centrage vertical sur les ordinateurs de bureau
• Aucune hauteur connue ou fixe
• Comportement de l'équipe de balises pour la colonne de droite sur les ordinateurs de bureau
• Prise en charge d'IE11

Faisabilité :

Solution CSS uniquement :

Malheureusement, flexbox CSS uniquement ne prend pas en charge nativement une réorganisation aussi complexe. Cependant, un compromis est possible en utilisant des hauteurs fixes :

<code class="css">.flex {
  height: 90vh;
  flex-flow: column wrap;
}
.flex div {
  flex: 1;
  width: 50%;
}
.flex div:nth-child(2) {
  order: -1;
}</code>

Solution basée sur JS :

Vous pouvez également découper le div vert et coller son contenu. dans le rose en utilisant JavaScript. Cette approche peut introduire des problèmes de performances et de scintillement, mais elle peut être adaptée à des scénarios spécifiques.

Exemple avec des hauteurs fixes :

Le code suivant démontre un fonctionnement CSS uniquement solution utilisant des hauteurs fixes :

<code class="css">.flex {
  height: 90vh;
}</code>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!