3 Réponses :
au lieu de flex-base code>, essayez d'ajouter largeur code>. Cela gardera 2 images dans une ligne. Flex-Base Code> D'autre part est pour la taille initiale de l'image. img.sub1, img.sub2 {
width: 50%;
padding: 0;
}
Vous ne définissez aucune largeur ou une hauteur à vos images, alors par défaut, ils prennent leurs véritables dimensions. Dans ce cas, vos images "sous" sont plus larges que la largeur que vous définissez à votre conteneur, par ainsi que, par flex-flow: enveloppe de rangée; Les images ne peuvent pas être sur la même ligne. Vous devez définir une largeur de 50% sur vos sous-images ou définir une plus grande largeur sur le conteneur.
Votre solution ressemble exactement à la même chose que le problème que le PO parle de moi.
Vous avez raison, je n'ai pas enregistré les changements. Les a sauvés maintenant
Tout d'abord, sur le numéro magique.
Vous avez un conteneur de 234px de large et deux images plus petites ayant des dimensions naturelles de 150px de 150px. Leur largeur combinée est de 300px, qui est plus grande que la largeur du conteneur, de sorte qu'elles ne correspondent pas dans la même rangée. P>
Nous pouvons résoudre ce problème en les rendant plus petit. Mais à quel point faut-il être petit? Il y a un rembourrage 1Px autour de chaque image, pour deux images de 4 pixels. Nous devons soustrayer cela de la largeur du conteneur. Quelles feuilles 234 - 4 = 230 pixels pour deux images, ou 230/2 = 115 pixels pour chaque image. P>
Dans votre exemple, la taille des images est contrôlée à l'aide de la hauteur code> et Flex-Base Code>. L'utilisation des deux en même temps peut conduire à des proportions déformées. Cela arrive effectivement à l'image supérieure de votre exemple "Look". Si vous le comparez à l'image d'origine, vous pouvez voir qu'il est écrasé verticalement. P>
aussi l'interaction de Lorsque vous définissez la hauteur de l'image sans régler sa largeur, l'image va Écheler automatiquement proportionnellement. Étant donné que nos images sont carrées, en définissant la hauteur à 111px, nous réglons implicitement la largeur sur 111px. Et puisque 111 est inférieur à 115 deux images en forme dans la même rangée. Il n'y a rien de magie sur le nombre 111, tout nombre inférieur à 115 fonctionnera. P> Nous pouvons simplifier le code un peu: p> hauteur code> et flex-base code> est tout à fait non intuitif. Pour atteindre la mise en page souhaitée, nous n'avons pas réellement besoin des deux, alors placons flex-base code> de côté. P> .images {
width: 234px;
display: flex;
flex-wrap: wrap; /* allow wrapping, otherwise all 3 images would be in the same row */
border: 1px solid red;
}
.images > * {
align-self: flex-start; /* prevent flexbox from stretching items vertically to fill the row */
box-sizing: border-box; /* include padding into the image width */
padding: 1px;
}
img.main {
width: 100%; /* occupy entire row */
}
img.sub1,
img.sub2 {
width: 50%; /* occupy half of the row */
}
Merci pour votre réponse! Une question rapide, un didacticiel a déclaré qu'il est préférable d'utiliser flex-base que d'utiliser la largeur pour flex. Est-ce vrai?
@Joji pour les images qui ne sont définitivement pas vraies, Voici ce qui se passe si vous essayez d'utiliser Flex -basis au lieu de la largeur. Mais les images sont un peu spéciales, ainsi que d'autres Éléments remplacés . Pour des éléments de bloc normaux tels que DIVS, j'utiliserais probablement flex-base au lieu de largeur car il respecte la direction flexible, et il peut également être combiné avec flex- rétrécissez et flex-poussser dans une seule propriété CSS, qui semble simplement un peu plus agréable.
Il suffit de créer un exemple avec elle et dans les deux cas (avec hauteur: 111px ou sans), il est brisé: jsfiddle.net/fqtye7dv