Ich habe ein kleines Problem. Ich habe immer Floating verwendet, um meine Elemente anzuordnen. Ich ziehe zu Flexbox um, habe einige Beispiele gemacht und alles war gut, aber ich mache ein Beispiel, welche Dinge nicht gut laufen.

Ich habe einen Behälter mit 1 bis 12 Produkten, 4 für jede Linie. Ich habe ein einfaches Beispiel mit nur vier gemacht und es funktioniert, aber jetzt mache ich ein Beispiel mit fünf Elementen. Die erste Zeile sieht gut aus, aber das fünfte Element nimmt 100% des Produktcontainers ein, aber ich möchte, dass es nur 25 nimmt %, der sechste dauert 25% und so weiter.

Das was ich sehe:

enter image description here

Hier ist mein Code:

<div class="container-2">
      <div class="item-2">
        ...
      </div>
      <div class="item-2 p2-2">
        ...
      </div>
      <div class="item-2">
        ...
      </div>
      <div class="item-2 pp2">
        ...
      </div>
      <div class="item-2 pp2">
        ...
      </div>
</div>

Und das ist mein CSS:

.container-2 {
  max-width: 1200px;
  margin: 0 auto;

  padding: 20px 15px;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

.item-2 {
  padding: 0 15px;
  flex: 1 0 25%;
  margin-bottom: 40px;
}
3
TaouBen 8 Feb. 2020 im 00:54

4 Antworten

Beste Antwort

Sie haben die Elemente auf flex: 1 0 25% gesetzt.

Dies gliedert sich in:

  • flex-grow: 1
  • flex-shrink: 0
  • flex-basis: 25%

Entfernen Sie flex-grow: 1. Es sagt den Gegenständen, dass sie freien Speicherplatz verbrauchen sollen.

Versuchen Sie Folgendes: flex: 0 0 25%

Weitere Details und andere Optionen finden Sie in den folgenden Beiträgen:

2
Michael_B 7 Feb. 2020 im 22:00

Mach es richtig -

.item-2 {
      padding: 0 15px;
      flex: 0 0 25%;
      margin-bottom: 40px;
    }
1
Ashish chakravarti 10 Feb. 2020 im 12:52

Ich empfehle flex: 0 1 auto zu verwenden.

1
TMOTTM 7 Feb. 2020 im 22:01

Ich würde box-sizing: border-box; und flex: 0 1 25%; für .item-2 verwenden

1
Roman 7 Feb. 2020 im 22:05