immer mindestens zwei Elemente mit Flexbox wickeln

Werfen Sie einen Blick auf this example immer mindestens zwei Elemente mit Flexbox wickeln

Es hat einen Flexbox Behälter mit flex-flow: row wrap; alle Einzelteile zu wickeln. Das ist fast, was ich will.

Wenn es zu wickeln beginnt, Artikelnummer 6 Packungen in die zweite Zeile:

1 2 3 4 5 
    6

Aber immer möchte ich mindestens zwei Elemente wickeln, wenn es zu wickeln beginnt, so werden Sie nie eine einzelne Produkte haben auf einer Linie:

1 2 3 4 
    5 6

Quelle

2015-05-22 Paul Verbeek-Mast

Fun Tatsache: in der Typografie, wenn das letzte Wort eines Satzes in die nächste Zeile gewickelt wird, wird es ein "Waisenkind." Auf Niederländisch heißt das "Hoerenjong." Das ist im Grunde das Problem, ja? –

Ja, das ist das Problem. Ich weiß, CSS hat Waisen, aber das funktioniert nur mit Text, wie du gesagt hast. Wäre toll, wenn es bei Flexblöcken funktionieren würde. PS. Schöne Tatsache über das niederländische Wort, wusste das nicht. Wir sind komisch. –

Ich kann mich erinnern, dass dies in einer Mailingliste für eine zukünftige Flexbox-Ebene diskutiert wurde (habe keinen Link dazu gefunden) und bis jetzt sehe ich keine Option, um den Wrap mit aktuellen Flexbox-Optionen/-Eigenschaften anzupassen. – helloanselm

dachte ich, einen Ausweg, um es für die Inline-Elemente zu tun Es verhält sich jedoch inconsistently across browsers bei Verwendung mit Inline-Blöcken. Immer noch keine Lösung, aber vielleicht kann jemand einen Weg finden, wie er sich mit Inline-Block-Elementen verhält.

.item { 
    display: inline; 
} 

.item::before { 
    content: ' '; 
    font-size: 0; 
} 

.item:last-child::before { 
    content: ''; 
}

Hier ist ein Fiddle mit ihm in Aktion.

Quelle

2017-07-29 11:42:45 Nuvanda

Das ist eine sehr interessante Lösung. Nicht sicher, ob es für meinen alten Fall (weil es vor 2 Jahren war) funktioniert hat, aber es tut, wonach ich gefragt habe. –

Hier ist ein Ansatz, der unter der Bedingung arbeiten soll, dass die Breite des Elements befestigt ist

Angenommen, die Breite 50 Pixel beträgt:

.container { 
    display: flex; 
    flex-flow: row wrap; 
} 

.flex-item: { 
    width: 50px; 
    display: block; 
} 

.flex-item:nth-child(even) { 
    translateX(100%) 
    margin-left: -100px; 
} 

.flex-item:nth-child(odd) { 
    margin-right: 50px; 
}

Der Trick ist im Grunde die „Fußabdruck“ jedes zweiten Elements in seine Vorgänger (negative Marge) zu bewegen, ist es immer noch in seinem ursprünglichen Platz anzuzeigen (übersetzen) und den verbleibenden Platz der Vorgänger essen mit (positiver Marge) zum Zwecke des Reißens.

Quelle

2015-05-25 05:09:13 the8472

Was machen Sie, wenn das Element eine variable Breite hat? Ist die einzige Lösung, um die Breite mit JS zu erkennen? – Gleasonator

Während nicht die eleganteste Lösung, können Sie die letzten beiden Elemente in einem anderen Flexbox wickeln könnte:

<html> 
    <head> 
     <style> 
      .flex { 
       display: flex; 
       flex-wrap: wrap; 
      } 
      .flex > div { 
       flex: 1 0 auto; 
       padding: 20px; 
       text-align: center; 
      } 
      .flex .flex { 
       padding: 0; 
       flex-grow: 2; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="flex"> 
      <div>1</div> 
      <div>2</div> 
      <div>3</div> 
      <div>4</div> 
      <div class="flex"> 
       <div>5</div> 
       <div>6</div> 
      </div> 
     </div> 
    </body> 
</html>

einen Stift Siehe hier: https://codepen.io/anon/pen/prodVd

Quelle

2017-07-24 11:53:55 Rolf

Diese Art entfernt das ganze flexible Teil von flexbox –

Sie könnten versuchen, den zweiten Flex-Container mit js zu injizieren. Wie gesagt, nicht elegant, aber es scheint zu funktionieren. Ich würde jedoch gerne eine bessere, reine CSS-Lösung sehen. – Rolf

immer mindestens zwei Elemente mit Flexbox wickeln

Antwort

Verwandte Themen