Warum werden flexible Artikel nicht verpackt?

Lesezeit: 8 Minuten

Warum werden flexible Artikel nicht verpackt
thailändisch

Ich versuche, mehrere Reihen von Quadraten (3 pro Linie) zu machen, die die gleiche Höhe haben.

Ich habe dafür etwas HTML und CSS geschrieben, aber die Boxen gehen alle in die gleiche Zeile.

Hier ist, was ich bisher habe:

#list-wrapper {
  display: flex;
  width: 100%;
}
#list-wrapper div {
  width: 33.33%;
}
#list-wrapper div img {
  flex: 1;
}
<div id="list-wrapper">
  <div>
    <img src="https://stackoverflow.com/questions/33137566/images/1.png" alt="image one" />
  </div>
  <div>
    <img src="images/2.png" alt="image two" />
  </div>
  <div>
    <img src="https://stackoverflow.com/questions/33137566/images/1.png" alt="image one" />
  </div>
  <div>
    <img src="images/2.png" alt="image two" />
  </div>
  <div>
    <img src="https://stackoverflow.com/questions/33137566/images/1.png" alt="image one" />
  </div>
  <div>
    <img src="images/2.png" alt="image two" />
  </div>
</div>

Wenn ich die Seite damit lade, erscheinen alle Felder, aber sie befinden sich alle in einer Zeile, die über die 100%-Breite des übergeordneten Div hinausgeht.

1646260326 589 Warum werden flexible Artikel nicht verpackt
Michael Benjamin

Eine anfängliche Einstellung eines Flex-Containers ist flex-wrap: nowrap.

Das bedeutet, dass beim Erstellen eines Flex-Containers (durch Anwenden von display: flex oder display: inline-flex zu einem Element) sind alle untergeordneten Elemente (“flex items”) auf eine einzige Zeile beschränkt.

Um Flex-Elemente zum Umwickeln zu aktivieren flex-wrap: wrap.


Hier sind ein paar Beispiele dafür, wie Flex-Eigenschaften funktionieren:

Ein einfacher Flex-Container mit verschiedenen Flex-Elementen, die ein Bild enthalten:

#list-wrapper {
    display: flex;
    border: 1px solid black;
}

#list-wrapper div {}

#list-wrapper div img {
    height: 150px;
    width: 150px;
}
<div id="list-wrapper">
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
</div>

Beachten Sie, dass nur eine Flex-Eigenschaft deklariert wurde: display: flex. Dadurch wird der Flex-Container eingerichtet. Die folgenden Verhaltensweisen sind standardmäßig:

  • flex-wrap: nowrap
  • flex-direction: row
  • justify-content: flex-start

Damit die Artikel verpackt werden können, fügen Sie hinzu flex-wrap: wrap:

#list-wrapper {
    display: flex;
    flex-wrap: wrap; /* NEW */
    border: 1px solid black;
}

#list-wrapper div { }

#list-wrapper div img {
    height: 150px;
    width: 150px;
}
<div id="list-wrapper">
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
</div>

Um nur drei Elemente pro Zeile zuzulassen, verwenden Sie die flex Eigentum:

#list-wrapper {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid black;
}

#list-wrapper div {
    margin: 10px;
    flex: 1 1 calc(33.33% - 20px); /* flex-grow, flex-shrink, 
                                      flex-basis: (width - margin) */
}

#list-wrapper div img {
    height: 150px;
    width: 150px;
}
<div id="list-wrapper">
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
</div>

Außerdem haben alle Flex-Elemente standardmäßig die gleiche Höhe (align-items: stretch).

#list-wrapper {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid black;
}

#list-wrapper div {
    margin: 10px;
    flex: 1 1 calc(33.33% - 30px);
    border: 1px solid #ccc;
    background-color: lightgreen;
    text-align: center;
}

#list-wrapper div img {
    height: 150px;
    width: 150px;
}
<div id="list-wrapper">
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
</div>

Die Dehnung ist deutlicher, wenn Sie wiederherstellen flex-wrap: nowrap und geben Sie dem Container eine Höhe:

#list-wrapper {
    display: flex;
    /* flex-wrap: wrap; */
    border: 1px solid black;
    height: 600px;
}

#list-wrapper div {
    margin: 10px;
    flex: 1 1 calc(33.33% - 30px);
    border: 1px solid #ccc;
    background-color: lightgreen;
    text-align: center;
}

#list-wrapper div img {
    height: 150px;
    width: 150px;
}
<div id="list-wrapper">
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
    <div><img src="http://i.imgur.com/60PVLis.png" alt=""></div>
</div>

1646260327 663 Warum werden flexible Artikel nicht verpackt
eher blau

Wenn Sie Flexbox verwenden und möchten, dass der Inhalt umbrochen wird, müssen Sie angeben flex-wrap: wrap. Standardmäßig werden Flex-Elemente nicht umbrochen.

Ihr Code hier tut nichts, weil das übergeordnete Element von #list-wrapper div img ist nicht display: flex. Sie müssen dies verschieben #list-wrapper div:

#list-wrapper div img {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

Um die Bilder quer zu haben, sollten Sie angeben flex-basis: 33.33333%.

Ändere dein CSS so und es wird funktionieren:

#list-wrapper {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    width: 100%;
    flex-wrap: wrap;
}

#list-wrapper div {
    flex: 0 0 33.333%;
}

JS Geige: https://jsfiddle.net/f47prnnt/1/

916810cookie-checkWarum werden flexible Artikel nicht verpackt?

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy