web-dev-qa-db-fra.com

Comment aligner la dernière ligne / ligne gauche sur plusieurs lignes flexbox

J'ai un problème majeur avec flexbox layout. J'ai construit un conteneur avec des boîtes remplies d'images et j'ai décidé d'utiliser flexbox layout pour justifier le contenu faire ressembler à une grille

Elle 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 bien sauf la dernière ligne/ligne - quand elle ne contient pas le même nombre d’éléments que les autres lignes, les éléments de centrage et que cela a brisé mon effet de grille.

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

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

cssrowflexbox
70
PuZ

Je l'ai. (Je pense) (ceci 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 justification-contenu: espace autour, si la dernière ligne n’a pas 4 images (a 3, 2 ou 1), elles ne respecteraient pas la grille, elles se répandraient. Alors.

Créez dans le HTML 3 divs avec la classe "remplissage-vide-espace-enfant" 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) contient les éléments suivants: flex/wrap-wrap: wrap;/justification-content: espace-autour

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

86
La Nube - Luis R. Díaz Muñiz

Malheureusement, cela n’est pas possible avec flexbox.

La meilleure solution consiste à ajouter des enfants invisibles en "remplissant" 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

40
sandstrom

Vous pouvez utiliser margin-right:auto sur le dernier élément flex.

Le problème ici est que vous perdrez l'espace entre les propriétés situées à gauche pour cet élément flex.

J'espère que ça aide!

16
bzin

Je pensais que cet exemple pourrait être utile à quiconque souhaitait plusieurs éléments et permettait une réactivité. Les éléments de la grille changent en fonction de la taille de la fenêtre. Il n'utilise pas d'enfants invisibles, tout se fait via css.

Peut aider une personne qui tente d'aligner des éléments à gauche lorsque la dernière ligne contient moins d'éléments et que la page doit être réactive.

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

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

Ce n'est pas un effet que tu voulais réaliser?

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>
2
Jonáš Krutil

Vous n'avez pas précisé si elle doit être réactive à 100%, mais quelque chose comme cette technique fonctionne.

Utilisez un conteneur par ligne et limitez-le à min-width. 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 .

1
Ignacio Correia