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

Je l'ai. (Je pense)(c'est ma première contribution ici !)

Imaginez une mise en page qui doit comporter 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), elles ne respecteraient pas la grille, elles s'étaleraient. Donc.

Créez 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 conteneur flexbox a display:flex / flex-wrap:wrap ; / justify-content:space-around

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

Answer 2

Malheureusement, cela n'est pas possible avec le système Flexbox.

La meilleure solution consiste à ajouter des enfants invisibles qui remplissent les "blocs" vides de la dernière ligne. 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

Answer 3

Vous pouvez utiliser margin-right:auto sur l'élément flex de dernier rang.

Le problème ici est que vous perdrez la propriété d'espacement à gauche pour cet élément flexible.

J'espère que cela vous aidera !

Answer 4

J'ai pensé que cet exemple pourrait être utile à tous ceux qui souhaitent avoir plusieurs éléments et permettre la réactivité, les éléments de la grille changeant en fonction de la taille de la fenêtre. Il n'utilise pas d'enfants invisibles, tout est fait en css.

Cela pourrait aider quelqu'un qui essaie d'aligner les éléments sur la gauche lorsque la dernière rangée a moins d'éléments et qu'il faut que la page soit réactive.

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

Exemple de 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>

Exemple de 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;
  }
}

Answer 5

Vous n'avez pas précisé s'il devait être 100 % réactif, mais quelque chose comme cette technique fonctionne.

Utilisez un conteneur par ligne et limitez-le avec une largeur minimale. Ajoutez également des éléments cachés pour que 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 .