Il existe un problème dans Google Chrome : lorsqu'un élément est placé dans un conteneur Flexbox contenant des éléments Flex adjacents code>center aligner le contenu dans différentes directions par rapport à la fenêtre.

Ce n'est pas un problème dans Firefox, IE11, Edge ou Safari car les éléments se développent toujours vers le bas.

Je suis curieux :

• Chrome se comporte-t-il selon certaines spécifications ? Si oui, lequel ? ≪/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.)
• 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>

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.

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é.

示例 1：Chrome 针对对齐 Flexbox 之间的空格的展开/折叠行为

$('button').click(function() { $(this).next().slideToggle(); }) 
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 ; } 
 
 
 
 
示例 2：Chrome 对居中对齐的 Flexbox 的展开/折叠行为
 
 
$('button').click(function() { $(this).next().slideToggle(); }) 
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 ; }