Comment aligner à gauche la dernière ligne dans une boîte flexographique à lignes multiples ?

Question

J'ai un problème majeur avec la mise en page flexbox. J'ai construit un conteneur avec des boîtes remplies d'images, et j'ai décidé d'utiliser la mise en page flexbox pour justifier le contenu afin qu'il ressemble à une grille.

C'est le code :

<div class="container">

    <div class="item"></div>
    <div class="item"></div>
    ...
    <div class="item"></div>

</div>

et le CSS :

.container {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -moz-justify-content: space-around;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
}

.container .item { width: 130px; height: 180px; background: red; margin: 0 1% 24px; }

Et tout semble bon sauf la dernière ligne/rangée - quand elle ne contient pas le même nombre d'éléments que les autres lignes, les éléments de centrage et cela a cassé mon effet de grille.

http://jsfiddle.net/puz219/7Hq2E/

Comment aligner la dernière ligne/rangée sur le côté gauche ?

Answer 1

Ce n'est pas un effet que vous vouliez obtenir ?

http://jsfiddle.net/7Hq2E/21/

CSS :

.container {
    display: flex;
    display: -webkit-flex;
    display: -moz-flex;
    flex-flow: row wrap;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
}
.container .item {
    width: 23%;
    height: 180px;
    background: red;
    margin: 0 1% 20px;
}

HTML :

<div class="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Answer 2

Je l'ai vérifié et cela fonctionne mieux dans mon outil d'édition HTML.

le script devrait être la manière

Partie CSS

.container {
affichage : flex ;
affichage : -webkit-flex ;
affichage : -moz-flex ;
justifier-contenu : espace-around ;
-webkit-justify-content : espace-around ;
-moz-justify-content : espace-around ;
flex-flow : enveloppement des rangs ;
-webkit-flex-flow : enveloppement des rangées ;
-moz-flex-flow : enveloppement des rangées ;
}

.container .item { width : 130px ; height : 180px ; background : green ; margin : 0 1% 24px ; }

Partie HTML

<div class="container">

    <div class="item"><a href='google.com'>Google</a></div>
    <div class="item"><a href='google.com'>Yahoo</a></div>
    <div class="item"><a href='google.com'>Bing</a></div>
</div>

<div class="container">
    <div class="item"><a href='google.com'>Google</a></div>
    <div class="item"><a href='google.com'>Yahoo</a></div>
    <div class="item"><a href='google.com'>Bing</a></div>

</div>