Flex-zone: Aligner la dernière ligne de la grille

Ajouter un ::after qui autofills l'espace. Pas besoin de polluer votre code HTML. Voici une codepen montrant: http://codepen.io/DanAndreasson/pen/ZQXLXj

.grid {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

.grid::after {
  content: "";
  flex: auto;
}

Que d'autres affiches ont mentionné - il n'y a aucun moyen propre pour aligner à gauche de la dernière ligne avec flexbox (à moins que par la spécialisation actuelle)

Cependant, pour ce que ça vaut: Avec le Grille CSS de Mise en page du Module c'est étonnamment facile à produire:

Fondamentalement, le code se résume à ceci:

ul {
  display: grid; /* 1 */
  grid-template-columns: repeat(auto-fill, 100px); /* 2 */
  grid-gap: 1rem; /* 3 */
  justify-content: space-between; /* 4 */
}

1) Faire de l'élément conteneur d'une grille contenant

2) Définir la grille avec auto colonnes de largeur de 100px. (Notez l'utilisation de auto-remplissage (comme revêtue de la auto-fit - qui (pour 1 ligne de mise en page) s'effondre vide de pistes à 0 causant les éléments à développer pour prendre le reste de l'espace. Cela aurait pour conséquence une justifier "l'espace entre" mise en page lorsque la grille a une seule ligne qui dans notre cas n'est pas ce que nous voulons. (découvrez cette démo pour voir la différence entre eux)).

3) Définir les lacunes et les gouttières pour la grille de lignes et de colonnes - là, parce que vous voulez un "espace entre" mise en page - l'écart sera effectivement un écart minimum, car il va grandir en tant que de besoin.

4) Similaire à flexbox.

CSS:

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, 100px);
  grid-gap: 1rem;
  justify-content: space-between;
  
  /* boring properties */
  list-style: none;
  background: wheat;
  padding: 2rem;
  width: 80vw;
  margin: 0 auto;
}

li {
  height: 50px;
  border: 1px solid green;
}

HTML:

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

Codepen Démo (Redimensionner pour voir l'effet)

Vous ne pouvez pas. Flexbox est pas un système de grille. Il n'a pas la langue des constructions à faire ce que vous demandez, au moins pas si vous êtes en utilisant justify-content: space-between. Le plus proche que vous pouvez obtenir avec Flexbox est d'utiliser la colonne de l'orientation, ce qui nécessite la définition explicite de la hauteur:

http://cssdeck.com/labs/pvsn6t4z (note: les préfixes non inclus)

ul {
  display: flex;
  flex-flow: column wrap;
  align-content: space-between;
  height: 4em;
}

Cependant, il serait plus simple de n'utiliser que des colonnes, qui a un meilleur support et ne nécessite pas de réglage à une hauteur spécifique:

http://cssdeck.com/labs/dwq3x6vr (note: les préfixes non inclus)

ul {
  columns: 15em;
}

Oui.! Nous pouvons, mais avec quelques requêtes de média & Maximum de colonnes sont prédéfinis.

Suis ici à l'aide de 4 colonnes. Vérifier mon code:

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 {
  display: flex;
  display: -webkit-flex;
  display: -moz-flex;
  justify-content: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  flex-basis: 25%; //max no of columns in %, 25% = 4 Columns
}

.container .item .item-child {
  width: 130px;
  height: 180px;
  background: red;
  margin: 10px;
}

@media (max-width: 360px) {
  .container .item {
    flex-basis: 100%;
  }
}

@media (min-width:360px) and (max-width: 520px) {
  .container .item {
    flex-basis: 50%;
  }
}

@media (min-width:520px) and (max-width: 680px) {
  .container .item {
    flex-basis: 33.33%;
  }
}

HTML:

<div class="container">
<div class="item">
<div class="item-child">1</div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
<div class="item">
<div class="item-child"></div>
</div>
</div>

NOTE

1) Pas besoin d'en créer un enfant div. Il peut être n'importe quel autre tag 'img' r ce que vous voulez..

2) Si vous voulez plus de colonnes de régler les questions des médias et de maximum pas.des colonnes.

Je sais qu'il y a beaucoup de réponses ici, mais.. la façon La plus simple de le faire est avec un grid au lieu de flex et grid template columns avec repeat et auto fills, où vous devez définir le nombre de pixels que vous avez donné à chaque élément, 100px de votre extrait de code.

CSS:

.exposegrid {
display: grid;
grid-template-columns: repeat(auto-fill, 100px);
justify-content: space-between;
}
.exposetab {
width: 100px;
height: 66px;
background-color: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(0, 0, 0, 0.4);
border-radius: 5px;
box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
margin-bottom: 10px;
}

HTML:

<div class="exposegrid">
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
  <div class="exposetab"></div>
</div>

Il est possible d'utiliser de "flex-start" et d'ajouter les marges manuellement. Cela nécessite un peu de math-piratage mais il est certainement facile de le faire et de le rendre facile à utiliser avec un préprocesseur CSS aime MOINS.

Voir, par exemple, MOINS de mixin:

.flexboxGridMixin(@columnNumber,@spacingPercent) {
@contentPercent: 100% - @spacingPercent;
@sideMargin: @spacingPercent/(@columnNumber*2);
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
> * {
box-sizing: border-box;
width: @contentPercent/@columnNumber;
margin-left: @sideMargin;
margin-right: @sideMargin;
}
}

Et puis il peut facilement être utilisé pour afficher une présentation de la grille souple:

ul {
list-style: none;
padding: 0;
@spacing: 10%;
@media only screen and (max-width: 499px) { .flexboxGridMixin(1,@spacing); }
@media only screen and (min-width: 500px) { .flexboxGridMixin(2,@spacing); }
@media only screen and (min-width: 700px) { .flexboxGridMixin(3,@spacing); }
@media only screen and (min-width: 900px) { .flexboxGridMixin(4,@spacing); }
@media only screen and (min-width: 1100px) { .flexboxGridMixin(5,@spacing); }
}
li {
background: pink;
height: 100px;
margin-top: 20px;
}

Voici un exemple de

http://codepen.io/anon/pen/YyLqVB?editors=110

Il y a un moyen sans flexbox, bien que vous devrez remplir les conditions suivantes. 1) Le conteneur a rembourrage. 2) les Articles sont de la même taille et que vous savez exactement combien vous voulez par ligne.

ul {
padding: 0 3% 0 5%;
}
li {
display: inline-block; 
padding: 0 2% 2% 0;
width: 28.66%;
}

Le plus petit rembourrage sur le côté droit du conteneur permet le rembourrage supplémentaire à droite de chaque élément de la liste. En supposant que les autres éléments dans le même parent que les objets de la liste sont rembourrées avec de 0 à 5%, il doit être au même niveau avec eux. Vous pouvez également ajuster les pourcentages pour autant de marge que vous souhaitez ou de l'utilisation calculer px valeurs.

Bien sûr, vous pouvez faire la même chose sans le rembourrage sur le récipient à l'aide nth-child (IE 9+) pour supprimer la marge sur chaque troisième case.

J'ai fait un SCSS mixin pour elle.

@mixin last-row-flexbox($num-columns, $width-items){
$filled-space: $width-items * $num-columns;
$margin: calc((100% - #{$filled-space}) /(#{$num-columns} - 1));
$num-cols-1 : $num-columns - 1;
&:nth-child(#{$num-columns}n+1):nth-last-child(-n+#{$num-cols-1}) ~ & {
margin-left: $margin;
}
@for $i from 1 through $num-columns - 2 { 
$index: $num-columns - $i;
&:nth-child(#{$num-columns}n+#{$index}):last-child{
margin-right: auto;
}
}
}

C'est le codepen lien: http://codepen.io/diana_aceves/pen/KVGNZg

Vous avez juste à régler les éléments de la largeur en pourcentage et en nombre de colonnes.

J'espère que cela peut vous aider.

C'est assez hacky, mais cela fonctionne pour moi. Je cherche à réaliser un espacement uniforme/marges.

.grid {
width: 1024px;
display: flex;
flex-flow: row wrap;
padding: 32px;
background-color: #ddd;  
&:after {
content: "";
flex: auto;
margin-left:-1%;
}
.item {
flex: 1 0 24.25%;
max-width: 24.25%;
margin-bottom: 10px;
text-align: center;
background-color: #bbb;
&:nth-child(4n+2),
&:nth-child(4n+3),
&:nth-child(4n+4) {
margin-left: 1%;
}
&:nth-child(4n+1):nth-last-child(-n+4),
&:nth-child(4n+1):nth-last-child(-n+4) ~ .item {
margin-bottom: 0;
}    
}
}

http://codepen.io/rustydev/pen/f7c8920e0beb0ba9a904da7ebd9970ae/

C'est une combinaison d'un grand nombre de réponses, mais c'est exactement ce que j'étais en avoir besoin-qui est, en alignant le dernier enfant dans un conteneur flex vers la gauche tout en maintenant l'espace entre le comportement (dans ce cas, c'est une disposition en trois colonnes).

Voici le balisage:

.flex-container {
display: flex;
justify-content: space-between;
flex-direction: row;
}
.flex-container:after {
content: "";
flex-basis: 30%;
}

En supposant que:

• Vous voulez 4 colonne de la grille de mise en page avec du papier d'emballage
• Le nombre d'éléments n'est pas nécessairement un multiple de 4

Définir une marge à gauche sur chaque élément, sauf le 1er, 5ème et 9ème élément et ainsi de suite. Si la marge de gauche est 10px puis chaque ligne aura 30px marge distribués parmi les 4 éléments. Le pourcentage de la largeur de point est calculé comme suit:

100% /4 - horizontal-border - horizontal-padding - left-margin * (4 - 1) / 4

C'est un bon palliatif pour les questions concernant la dernière rangée de flexbox.

CSS:

.flex {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 1em 0 3em;
background-color: peachpuff;
}
.item {
margin-left: 10px;
border: 1px solid;
padding: 10px;
width: calc(100% / 4 - 2px - 20px - 10px * (4 - 1) / 4);
background-color: papayawhip;
}
.item:nth-child(4n + 1) {
margin-left: 0;
}
.item:nth-child(n + 5) {
margin-top: 10px;
}

HTML:

<div class="flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
<div class="flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
</div>
<div class="flex">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>

Oh la la, je crois que j'ai trouvé une bonne solution avec un minimum de CSS et pas de JS. Check it out:

CSS:

img {width:100%;}
li {
display: inline-block;
width:8em;
list-style:none;
}
ul {text-align: justify;}

HTML:

<ul>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li>
<img src="http://www.planwallpaper.com/static/images/kitty-cat.jpg" />
</li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>

La clé ici est de se rappeler que ce que l'on cherche à atteindre est exactement ce que text-align: justify ne!

Les éléments vides dans le code HTML sont là pour faire de la dernière ligne de l'affichage parfaitement sans en changer l'apparence, mais pourraient ne pas être nécessaires compte tenu de ce que vous essayez d'atteindre. Pour un équilibre parfait dans chaque situation, vous avez besoin d'au moins x-4 éléments vides, x étant le nombre d'éléments à afficher, ou n-2, n étant le nombre de colonnes que vous souhaitez afficher.

J'ai été en mesure de le faire avec justify-content: space-between sur le conteneur