Voici ma démonstration de test dans codepen. J'espère garder la même marge entre les éléments, donc j'utilise flex-grow: 1 pour remplir la surépaisseur.
Cependant, les éléments de la dernière ligne ne semblent pas garder la même largeur que les lignes précédentes. Comment faire?
.row{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
}
.col{
min-width: 160px;
flex-grow: 1;
margin: 10px 10px;
background:#eee;
height: 120px;
}
C'est ce que je veux, addon utilise flex-grow pour garder la même marge
3 Réponses :
votre largeur min. peut tirer div vers la ligne suivante et je le diminue.
et vous devez utiliser flex sur les colonnes et flex-direction sur la ligne
quelque chose comme ceci:
<div class="row"> <div class="col"> a </div> <div class="col"> b </div> <div class="col"> c </div> <div class="col"> b </div> <div class="col"> c </div> </div>
.row{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
flex-direction: row;
}
.col{
width: 200px;
margin: 10px 10px;
background:#eee;
height: 120px;
}
<div class="row"> <div class="col"> a </div> <div class="col"> b </div> <div class="col"> c </div> <div class="col"> b </div> <div class="col"> c </div> </div>
.row{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex-direction: row;
}
.col{
min-width: 200px;
flex-grow: 1;
margin: 10px 10px;
background:#eee;
height: 120px;
flex: 1;
}
<div class="row"> <div class="col"> a </div> <div class="col"> b </div> <div class="col"> c </div> </div>
.row{
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
flex-direction: row;
}
.col{
min-width: 20px;
flex-grow: 1;
margin: 10px 10px;
background:#eee;
height: 120px;
flex: 1;
}
merci, mais les articles sont beaucoup qui ne peuvent pas être mis en une seule rangée ... j'avais mis à jour les détails en question
il passera automatiquement à la ligne suivante, mais si vous voulez être sur une ligne, vous devez supprimer min-width.
la largeur minimale est nécessaire et le passage automatique à la ligne suivante est correct. mais j'espère que les articles garderont la même largeur
ok voir tous les résultats. et vous pouvez aussi utiliser max-width
J'espère que le code suivant pourra résoudre votre problème.
<div class="row"> <div class="col">1</div> <div class="col">2</div> <div class="col">3</div> <div class="col">4</div> <div class="col">5</div> </div>
.row{
display: flex;
flex-wrap: wrap;
background: red;
}
.col{
flex: 1;
min-width: calc(33.33% - 30px);
max-width: calc(33.33% - 30px);
margin: 10px 15px;
background:#eee;
height: 120px;
}
merci, mais maintenant, chaque ligne est limitée à seulement 3 colonnes, est définie dynamique possible par min-width = 160px
Vous pouvez utiliser calc pour définir la propriété width ou flex-based sur calc (33.33% - 30px) code> pour qu'il s'adapte aux marges droite et gauche que vous avez appliquées au col - voir la démo ci-dessous:
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
<div class="col">4</div>
<div class="col">5</div>
</div>
.row{
display: flex;
flex-wrap: wrap;
background: red;
}
.col{
flex-basis: calc(33.33% - 30px);
margin: 10px 15px;
background:#eee;
height: 120px;
}
merci, mais maintenant, chaque ligne est limitée à seulement 3 colonnes, est définie dynamique possible par min-width = 160px
mais si vous avez min-width dans des écrans plus petits, cela cassera cette disposition ...