Comment aligner la dernière ligne à gauche de la flexbox [dupliquer]

compris. (Je pense que)(c'est ma première contribution ici!)

Imaginez une mise en page qui doit avoir 4 images par ligne. w: 205 h: 174 Problème:en utilisant justify-content: space-around, si la dernière ligne n'a pas 4 images (a 3, 2 ou 1), ils ne respecteraient pas la grille, ils se propageraient. Si.

créer dans le html 3 divs avec la classe" filling-empty-space-childs " comme ceci.

.filling-empty-space-childs {
    width:205px; /*the width of the images in this example*/
    height:0; /*Important! for the divs to collapse should they fall in a new row*/
}

le flexbox conteneur a display:flex / flex-wrap:wrap; / justifier-contenu:l'espace autour de

La dernière ligne peut avoir 4, 3, 2, 1 images. 4 images: pas de problème, ces trois divs s'effondreraient dans une nouvelle rangée car ils n'ont pas de hauteur. 3 images: pas de problème, une div va être dans la même rangée, invisible, et les deux autres s'envelopperaient dans une nouvelle rangée, mais s'effondreront car ils n'ont pas de hauteur. 2 images: pas de problème, deux divs vont être dans la même ligne, invisibles, le reste... effondrer 1 image: pas de problème, les trois divs vont remplir l'espace.

malheureusement, cela n'est pas possible avec flexbox.

la meilleure solution consiste à ajouter les enfants invisibles 'remplissant' les 'blocs' vides dans la dernière rangée. De cette façon, l'élément réel, visible, est aligné à gauche.

question similaire: Flex-box: aligner la dernière ligne sur la grille

vous pouvez utiliser margin-right:auto sur le dernier article flex enfant.

le problème ici est que vous perdrez l'espace-entre la propriété sur la gauche pour cet article flex.

Espère que cela aide!

j'ai pensé que cet exemple pourrait être utile pour n'importe qui qui qui voulait plusieurs articles et permettre la réactivité, les articles de grille changent en fonction de la taille du viewport. Il n'utilise pas d'enfants invisibles, tout est fait à travers css.

pourrait aider quelqu'un qui essaie d'aligner des éléments vers la gauche quand la dernière rangée a moins d'éléments et ils exigent que la page soit réactive.

http://codepen.io/kunji/pen/yNPVVb

exemple HTML

<div class="main-container">

    <div class="main-items-container">

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

        <div class="item-container">
          <h2>Item Name</h2>
        </div>

    </div>

</div>

échantillon CSS

.main-container {
  max-width: 1000px;
  min-width: 300px;
  margin: 0 auto;
  padding: 40px;
  box-sizing: border-box;
  border: 1px solid #000;
}

.main-items-container {
  display: -ms-flexbox;
  display: flexbox;
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  padding: 0;
  margin: 10px 0;
  list-style: none;
  width: auto;
  -webkit-flex-flow: row wrap;
  justify-content: flex-start;
  -webkit-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-align-items: stretch;
  align-items: stretch;
  box-sizing: border-box;
}

@media (min-width: 971px) {
  .item-container {
    margin: 10px 2%;
    width: 22%;
    padding: 10px;
    border: 1px solid #000;
    box-sizing: border-box;
  }
  .item-container:nth-child(4n+1) {
    margin-left: 0;
  }
  .item-container:nth-child(4n) {
    margin-right: 0;
  }
}

@media (min-width: 550px) and (max-width: 970px) {
  .item-container {
    margin: 10px 2.50%;
    width: 30%;
    padding: 10px;
    border: 1px solid #000;
    box-sizing: border-box;
  }
  .item-container:nth-child(3n+1) {
    margin-left: 0;
  }
  .item-container:nth-child(3n) {
    margin-right: 0;
  }
}

@media (max-width: 549px) {
  .item-container {
    margin: 10px 0;
    width: initial;
    padding: 10px;
    border: 1px solid #000;
    box-sizing: border-box;
  }
}

vous n'avez pas précisé si elle doit être 100% responsive, mais quelque chose comme cette technique fonctionne.

utiliser un conteneur par rangée et le limiter avec Min-Largeur, ajouter également des éléments cachés pour faire le calcul fonctionne:

HTML

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

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

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

</div>

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;
    min-width:580px;
    background:rgba(00,00,00,0.5);
}
.container .item { width: 130px; height: 180px; background: #000; margin: 0 1% 24px;  }

.container .item.empty{opacity:0;}

Voici l'exemple .

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>

j'ai vérifié et cela a mieux fonctionné dans mon outil d'édition HTML

le script doit être à la façon de

CSS Partie

.conteneur {

display: flex;

display: - webkit-flex;

display: - moz - flex;

justifier-contenu: l'espace autour;

-webkit-justifier-contenu: l'espace autour;

-moz-justifier-contenu: l'espace autour;

flex-flow: ligne wrap;

-webkit-flex-flow: ligne wrap;

-moz-flex-flow: ligne wrap;

}

.conteneur. point { largeur: 130px; hauteur: 180px; arrière-plan: vert; marge: 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>

vous pouvez utiliser flexbox avec max-width (les préfixes vendeur ont été supprimés):

.container {
   display: flex;
   width: 100%;
   justify-content: space-around;
   flex-direction: row;
   flex-wrap: wrap;
}

.column {
   flex: 1 0 33.333%;
   max-width: 33.333%;
}

et le HTML

<div class="container">
    <div class="column">1</div>
    <div class="column">2</div>
    <div class="column">3</div>
    <div class="column">4</div>
</div>

Vue sur CodePen: http://codepen.io/anon/pen/gpwEJW