Wie unterbreche ich die Linie in einem Flex-Layout?

Lesezeit: 2 Minuten

Benutzer-Avatar
kptlronyttcna

Ich habe mein erstes, zweites und drittes Element und dann möchte ich, dass das vierte Element in die nächste Zeile kommt, egal wie breit der Abstand ist.

.box {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-around;
  align-items: flex-start;
}
.it {
  max-width: 420px;
}
<div class="box">
  <div class="it">1</div>
  <div class="it">2</div>
  <div class="it">3</div>
  <div class="it">4</div>
</div>

  • Ich würde für diesen Anwendungsfall Grid over Flex verwenden

    – Paul Totzke

    4. Juni 2021 um 14:37 Uhr

Sie können ein breites Pseudo-Element an der richtigen Position einfügen:

.flex-container {
  display: flex;
  flex-wrap: wrap;
}
.flex-container::after {
  content: '';
  width: 100%;
}
.flex-item:last-child { /* or `:nth-child(n + 4)` */
  order: 1;
}
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</div>
  <div class="flex-item">4</div>
</div>

  • Danke, es funktioniert fast. Das einzige Problem ist, wenn es ein 5. Element gibt, geht das 4. Element in die nächste Reihe, aber das fünfte Element bleibt in der ersten Reihe.

    – kptlronyttcna

    27. Februar 2015 um 0:48 Uhr


  • @kptlronyttcna Dann verwenden :nth-child(n + 4) Anstatt von :last-child.

    – Oriol

    27. Februar 2015 um 0:48 Uhr


  • @kptlronyttcna Mit Pseudoelementen können Sie Inhalte nur an zwei verschiedenen Stellen einfügen (::before und ::after), kann also nicht mehr als zwei erzwungene Zeilenumbrüche haben. Sie können jedoch das HTML-Layout bearbeiten und beliebig viele breite Dummy-Elemente an den richtigen Stellen einfügen.

    – Oriol

    27. Februar 2015 um 1:00 Uhr

Benutzer-Avatar
Sunil Prajapat

Ich habe das gelöst durch:

.flex-container{
    display:flex;
    flex-direction:column;
    /* how you want your lines */
    text-align:center;
}

<div class="flex-container">
    <p>Line1</p>
    <p>Line2</p>
</div>

1205000cookie-checkWie unterbreche ich die Linie in einem Flex-Layout?

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

Privacy policy