it-swarm.com.de

So richten Sie die letzte linke Zeile in mehreren Zeilen aus flexbox

Ich habe ein großes Problem mit dem flexbox layout. Ich baue einen Container mit Kästchen, die mit Bildern gefüllt sind, und habe mich für das flexbox layout entschieden, um den Inhalt zu rechtfertigen es sieht aus wie ein Gitter

Ihr ist der Code:

<div class="container">

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

</div>

und das 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; }

Und alles sieht gut aus, bis auf die letzte Zeile/Reihe - wenn es nicht die gleiche Anzahl von Elementen enthält wie andere Zeilen, werden Elemente zentriert und mein Gittereffekt wird unterbrochen.

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

Wie richtet man die letzte Zeile/Reihe an der linken Seite aus?

70
PuZ

Ich habs. (Ich denke) (Dies ist mein erster Beitrag hier!)

Stellen Sie sich ein Layout vor, das 4 Bilder pro Zeile enthalten muss. w: 205 h: 174 Problem: Wenn die letzte Zeile keine 4 Bilder enthält (3, 2 oder 1), würde das Raster nicht beachtet und sie würden sich ausbreiten. So.

Erstellen Sie in HTML 3 Divs mit der Klasse "Füllen-Leerraum-Childs" wie folgt.

.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*/
}

Der Container flexbox hat folgende Anzeige: flex/flex-wrap: wrap;/justify-content: space-around

Die letzte Reihe kann 4, 3, 2, 1 Bilder enthalten.4 Bilder: Kein Problem, diese drei Divs würden in einer neuen Reihe zusammenbrechen, da sie keine Höhe haben. images: kein problem, ein div wird sich in derselben reihe befinden, unsichtbar, und die anderen beiden werden in eine neue reihe umgebrochen, aber zusammenbrechen, da sie keine höhe haben. 2 Bilder: kein Problem, zwei Divs werden in derselben Reihe sein, unsichtbar, der Rest ... zusammengebrochen 1 Bild: kein Problem, die drei Divs werden gehen den Raum ausfüllen.

Leider ist dies mit der Flexbox nicht möglich.

Die beste Lösung besteht darin, unsichtbare Kinder hinzuzufügen, die die leeren 'Blöcke' in der letzten Zeile füllen. Auf diese Weise wird das tatsächliche, sichtbare Element nach links ausgerichtet.

Ähnliche Frage: Flex-Box: Letzte Zeile am Raster ausrichten

40
sandstrom

Sie können margin-right:auto für das Flex-Element des letzten Kindes.

Das Problem hierbei ist, dass Sie den Abstand zwischen den Eigenschaften auf der linken Seite für dieses Flex-Element verlieren.

Ich hoffe es hilft!

16
bzin

Ich dachte, dieses Beispiel könnte für alle nützlich sein, die mehrere Elemente benötigen und die Reaktionsfähigkeit berücksichtigen möchten. Die Rasterelemente ändern sich in Abhängigkeit von der Größe des Ansichtsfensters. Es werden keine unsichtbaren Kinder verwendet, alles wird durch CSS erledigt.

Könnte jemandem helfen, Elemente nach links auszurichten, wenn die letzte Zeile weniger Elemente enthält und die Seite reaktionsfähig sein muss.

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

HTML-Beispiel

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

Beispiel-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

Diesen Effekt wollten Sie nicht erzielen?

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

Sie haben nicht angegeben, ob es 100% reaktionsfähig sein soll, aber so etwas funktioniert.

Verwenden Sie einen Container pro Zeile und begrenzen Sie ihn mit einer minimalen Breite. Fügen Sie auch ausgeblendete Elemente hinzu, damit die Berechnung funktioniert:

[~ # ~] 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;}

Hier ist das Beispiel .

1
Ignacio Correia