Google Chrome utilise la fenêtre Flexbox pour ancrer la direction de l'expansion
<p>Il existe un problème dans Google Chrome : lorsqu'un élément est placé dans un conteneur Flexbox contenant des éléments Flex <em>adjacents</em> code>center</code> aligner le contenu dans différentes directions par rapport à la fenêtre. </p>
<p>Ce n'est pas un problème dans Firefox, IE11, Edge ou Safari car les éléments se développent toujours vers le bas. </p>
<p>Je suis curieux :</p>
<ul>
<li>Chrome se comporte-t-il selon certaines spécifications ? Si oui, lequel ? ≪/li>
<li>Sinon, pourquoi le feriez-vous dans Chrome ? (À mon humble avis, cliquer sur un déclencheur qui disparaît aléatoirement hors de l'écran est une expérience utilisateur terrible.) </li>
<li>Est-il possible de modifier ou de désactiver le comportement de Chrome d'une manière ou d'une autre ? Par exemple. Via CSS ou balises méta ? ≪/li>
</ul>
<p><strong>Mise à jour 1 : si possible, j'ai soumis le numéro 739860 sur le outil de suivi des bogues de Chrome pour demander des informations/explications aux développeurs de Chromium. </strong></p>
<hr>
<p>Deux exemples sont insérés ci-dessous. La suite de tests complète décrivant le problème peut être trouvée avec ce stylo : https://codepen.io/jameswilson/full/xrpRPg/ J'ai choisi d'utiliser slipToggle dans cet exemple afin que le mouvement de dépliage/pliage soit animé et accrocheur. Le même comportement se produit avec l'onglet Détails, mais il n'y a pas encore de support entre navigateurs et le développement/réduction est trop saccadé.</p>
<p><strong>示例 1：Chrome 针对对齐 Flexbox 之间的空格的展开/折叠行为</strong></p>
<p>
<pre class="brush:js;toolbar:false;">$('button').click(function() {
$(this).next().slideToggle();
})</pré>
<pre class="brush:css;toolbar:false;">body {
marge : 30px ;
famille de polices : sans-serif ;
}
de côté,
à part div,
résumé,
principal,
bouton,
détails p,
bouton + p {
arrière-plan : rgba(0,0,0,.09) ;
bordure : aucune ;
remplissage : 20 px ;
marge : 0 ;
}
.flexconteneur {
affichage : flexible ;
}
de côté {
flexion : 1 ;
position : relative ;
largeur maximale : 25 % ;
fond : crème à la menthe ;
affichage : flexible ;
direction flexible : colonne ;
position : relative ;
}
de côté.espace-entre {
justifier-contenu : espace entre les deux ;
}
à part.centre {
justifier-contenu : centre ;
}
principal {
flexion : 3 ;
position : relative ;
largeur maximale : 75 % ;
fond : bleu alice ;
alignement vertical : haut ;
hauteur : 100 % ;
}
principal > * + * {
marge supérieure : 20 px ;
}
bouton + p {
affichage : aucun ;
}</pré>
<pre class="brush:html;toolbar:false;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;</script>
<section class="flexcontainer">
<aside class="espace-entre">
<div>Barre latérale supérieure</div>
<div>Barre latérale inférieure</div>
≪/à part>
<principal>
<div>
<bouton>slideToggle</bouton>
<p>Autres navigateurs : se développe toujours vers le bas.<br>
Chrome : doit toujours s'étendre vers le bas, car la barre latérale supérieure est toujours visible.</p>
</div>
<div>
<bouton>slideToggle (se développe généralement vers le bas)</bouton>
<p>Autres navigateurs : se développe toujours vers le bas.<br>
Chrome : doit s'étendre vers le bas tandis que la barre latérale inférieure et la barre latérale supérieure sont toutes deux visibles. Mais il s'étendra vers le haut si vous faites défiler suffisamment vers le bas pour que la barre latérale supérieure soit hors écran.</p>
</div>
<div>
<bouton>slideToggle (se développe généralement vers le bas)</bouton>
<p>Autres navigateurs : se développe toujours vers le bas.<br>
Chrome : doit s'étendre vers le bas tandis que la barre latérale inférieure et la barre latérale supérieure sont toutes deux visibles. Mais il s'étendra vers le haut si vous faites défiler suffisamment vers le bas pour que la barre latérale supérieure soit hors écran.</p>
</div>
</principal>
</section></pré>
</p>
<p><strong>示例 2：Chrome 对居中对齐的 Flexbox 的展开/折叠行为</strong></p>
<p>
<pre class="brush:js;toolbar:false;">$('button').click(function() {
$(this).next().slideToggle();
})</pré>
<pre class="brush:css;toolbar:false;">body {
marge : 30px ;
famille de polices : sans-serif ;
}
de côté,
à part div,
résumé,
principal,
bouton,
détails p,
bouton + p {
arrière-plan : rgba(0,0,0,.09) ;
bordure : aucune ;
remplissage : 20 px ;
marge : 0 ;
}
.flexconteneur {
affichage : flexible ;
}
de côté {
flexion : 1 ;
position : relative ;
largeur maximale : 25 % ;
fond : crème à la menthe ;
affichage : flexible ;
direction flexible : colonne ;
position : relative ;
}
de côté.espace-entre {
justifier-contenu : espace entre les deux ;
}
à part.centre {
justifier-contenu : centre ;
}
principal {
flexion : 3 ;
position : relative ;
largeur maximale : 75 % ;
fond : bleu alice ;
alignement vertical : haut ;
hauteur : 100 % ;
}
principal > * + * {
marge supérieure : 20 px ;
}
bouton + p {
affichage : aucun ;
}</pré>
<pre class="brush:html;toolbar:false;"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> ;</script>
<section class="flexcontainer">
<aside class="centre">
<div>Barre latérale centrale</div>
≪/à part>
<principal>
<div>
<bouton>slideToggle (se développe généralement vers le bas)</bouton>
<p>Autres navigateurs : se développe toujours vers le bas.<br>
Chrome : s'étend généralement vers le bas. S'agrandit dans les deux sens lorsque le bord supérieur du conteneur sort de la fenêtre.</p>
</div>
<div>
<bouton>slideToggle</bouton>
<p>Autres navigateurs : se développe toujours vers le bas.<br>
Chrome : s'étend généralement vers le bas. S'agrandit dans les deux sens lorsque le bord supérieur du conteneur sort de la fenêtre.</p>
</div>
<div>
<bouton>slideToggle (se développe généralement vers le bas)</bouton>
<p>Autres navigateurs : se développe toujours vers le bas.<br>
Chrome : s'étend généralement vers le bas. S'agrandit dans les deux sens lorsque le bord supérieur du conteneur défile hors de la fenêtre, puis reprend son expansion vers le bas lorsque la barre latérale centrale défile hors de la vue.</p>
</div>
</principal>
</section></pré>
</p>
