2017-03-09 1 views
1

Existe-t-il une possibilité ou une solution de contournement, que les éléments soient flottants à gauche quand j'ai quelque chose comme une grille faite avec flexbox et justify-content: espace-entre?Flexbox justify-content: espace entre les manipulations avec peu d'éléments

Voici mon code/démo, ce que je veux dire:

#wrapper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-between; 
 
} 
 

 
#wrapper div { 
 
    width: 19%; 
 
    background: #ccc; 
 
    height: 50px; 
 
    margin-bottom: 20px; 
 
}
<div id="wrapper"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>

Ce 10 premières boîtes sont d'accord, je veux avoir quelque chose comme cette grille, mais les derniers devrait prendre placer côte à côte et pas avec beaucoup d'espace entre.

Cordialement, Markus

+0

Je ne pense pas que cela puisse fonctionner. Dans l'article original (https://css-tricks.com/filling-space-last-row-flexbox/), vous remarquerez que 'space-between' n'est pas utilisé. Ajoutez des marges et cela fonctionnera. Sur une note connexe, n'utilisez pas 'background' pour spécifier' background-color' (plus sur cela [ici]) (https://csswizardry.com/2016/12/css-shorthand-syntax-considered-an- anti-pattern /)). –

+0

Merci. Je vais vérifier ça. le "problème" est que je veux l'avoir facilement et propre et pas 4 ou 5 choses juste pour les marges, j'espérais qu'il y aurait une bonne solution avec flexbox;) – Sukrams

Répondre

0

essayer quelque chose comme ceci:

#wrapper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    
 
} 
 

 
#wrapper div { 
 
    width: 19%; 
 
    background: #ccc; 
 
    height: 50px; 
 
    margin-bottom: 20px; 
 
    margin-left:5px; 
 
}
<div id="wrapper"> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
    <div></div> 
 
</div>