J'ai une grille flexbox à 4 colonnes utilisée pour afficher les produits. Tous les produits ont une largeur de 25% mais comment puis-je m'assurer que le réseau ne se casse pas si seulement 1 produit obtient une largeur de 75% par exemple pour que je puisse afficher 2 produits sur une rangée?Grille Flexbox avec colonnes à plusieurs largeurs
Existe-t-il un moyen, en utilisant la flexbox, de donner la priorité à l'élément de réseau 75% plus large afin qu'il ajuste/déplace automatiquement la grille pour qu'elle ne se brise pas comme elle le fait actuellement?
jsFiddle(Code en bas)
https://jsfiddle.net/kdjkc15g/
C'est ce que je suis en train de réaliser:
CSS
.grid-uniform {
display: -ms-flex;
display: -webkit-flex;
display: flex;
flex-wrap: wrap;
margin-left: -20px;
}
.grid__item {
width: 25%;
display: -ms-flex;
display: -webkit-flex;
display: flex;
padding-left: 20px;
position: relative;
margin-bottom: $gutter*2;
}
.grid__item.featured-product {
width: 75%;
}
HTML
<div class="flex-grid">
<div class="grid-uniform">
<a href="#" class="product grid__item">
<div class="flex-content">
<div class="grid__image">
<img src="http://via.placeholder.com/250x350">
</div>
<div class="grid product-info">
<p>
This is a title
</p>
</div>
</div>
</a>
...
</div>
</div>