`flex-line-count` CSS property

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die flex-line-count CSS Eigenschaft legt die Mindestanzahl von Flex-Zeilen fest, über die Flex-Elemente im Falle eines Flex-Containers mit der flex-wrap oder flex-flow Eigenschaft, die das Schlüsselwort balance enthält, verteilt werden sollen.

Probieren Sie es aus

flex-line-count: 1;

flex-line-count: 3;

flex-line-count: 4;

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div>Item One</div>
    <div>Item Two</div>
    <div>Item Three</div>
    <div>Item Four</div>
    <div>Item Five</div>
    <div>Item Six</div>
  </div>
</section>

#example-element {
  border: 1px solid #c5c5c5;
  width: 80%;
  display: flex;
  flex-wrap: wrap balance;
}

#example-element > div {
  background-color: rgb(0 0 255 / 0.2);
  border: 3px solid blue;
  width: 60px;
  margin: 10px;
}

Syntax

css

/* Integer values */
flex-line-count: 1;
flex-line-count: 3;
flex-line-count: 12;

/* Global values */
flex-line-count: inherit;
flex-line-count: initial;
flex-line-count: revert;
flex-line-count: revert-layer;
flex-line-count: unset;

Werte

Diese Eigenschaft wird als folgender Wert angegeben:

<integer>: Eine positive Ganzzahl, die die Mindestanzahl von Flex-Zeilen festlegt, über die ausgewogene, umgebrochene Flex-Elemente verteilt werden. Der Standardwert ist 1.

Beschreibung

Die Eigenschaft flex-line-count legt die Mindestanzahl von Flex-Zeilen fest, über die Flex-Elemente in umgebrochenen, ausgewogenen Flex-Containern verteilt werden sollen – mit anderen Worten, Flex-Containern, die eine flex-wrap oder flex-flow Eigenschaft mit dem Schlüsselwort balance enthalten, zusätzlich zu den Schlüsselwörtern wrap oder wrap-reverse.

Ein wichtiger Anwendungsfall für flex-line-count ist das Erstellen eines ausgewogenen Satzes von zwei (oder mehr) Spalten, unabhängig von der Anzahl der Elemente in einer Liste. In solchen Fällen funktioniert das Festlegen einer expliziten height oder max-height nicht, da Sie nicht wissen, wie viel Inhalt vorhanden sein wird, und möglicherweise weniger oder mehr Spalten als gewünscht haben. Siehe Erstellung von ausgewogenen Spalten für ein Beispiel zur Implementierung.

Wenn balance nicht gesetzt ist oder Flex-Elemente nicht so eingestellt sind, dass sie auf mehrere Flex-Zeilen umgebrochen werden, hat die Eigenschaft flex-line-count keine Wirkung.

Wenn der Wert von flex-line-count gleich der Anzahl der Flex-Elemente oder größer ist, wird es ein Flex-Element pro Flex-Zeile geben.

Formale Definition

Anfangswert	`1`
Anwendbar auf	mehrzeilige flexible Container
Vererbt	Nein
Berechneter Wert	wie angegeben
Animationstyp	Nummer

Formale Syntax

flex-line-count = 
  <integer [1,∞]>  

<integer> = 
  <number-token>

Beispiele

Effekt verschiedener `flex-line-count` Werte

Dieses Beispiel zeigt die Auswirkungen verschiedener Werte von flex-line-count auf vier Kästchen.

HTML

Wir fügen vier Container-<div>s ein, jedes mit einer class von box und zehn untergeordneten <div>s; jeder Container-<div> hat einen unterschiedlichen id-Wert.

html

<div class="box" id="box-no-balance">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
</div>

<div class="box" id="box1">...</div>
<div class="box" id="box2">...</div>
<div class="box" id="box3">...</div>

<p>No <code>balance</code></p>

<div class="box" id="box-no-balance">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
</div>

<p><code>flex-line-count: 3</code></p>

<div class="box" id="box1">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
</div>

<p><code>flex-line-count: 4</code></p>

<div class="box" id="box2">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
</div>

<p><code>flex-line-count: 5</code></p>

<div class="box" id="box3">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
  <div>Seven</div>
  <div>Eight</div>
  <div>Nine</div>
  <div>Ten</div>
</div>

CSS

* {
  box-sizing: border-box;
}

.box {
  width: 100%;
  border: 2px dotted gray;
  margin-bottom: 20px;
  gap: 10px;
}

.box > * {
  border: 2px solid rgb(96 139 168);
  border-radius: 5px;
  background-color: lightgray;
}

Wir wenden display: flex auf alle Boxen an, um sie zu Flex-Containern zu machen, und geben ihnen dann einen flex-wrap Wert von wrap balance, damit alle ihre Flex-Kinder auf mehrere, ausgewogene Zeilen umgebrochen werden.

css

.box {
  display: flex;
  flex-wrap: wrap balance;
}

Wir setzen auch einen flex Wert von 1 1 150px auf die Flex-Kinder, damit sie eine Basisbreite von 150px haben und jeden überschüssigen Raum gleichmäßig über die Elemente in jeder Flex-Zeile verteilen.

css

.box > * {
  flex: 1 1 150px;
}

Für den #box-no-balance Flex-Container entfernen wir das Balancieren, wobei wir die Zeilenanzahl aufheben, indem wir den ursprünglichen flex-wrap: wrap balance Wert mit wrap überschreiben. Wir wenden unterschiedliche flex-line-count Werte auf jeden Flex-Container an und inkrementieren sie, sodass ihre Kinder über eine zunehmend größere Anzahl von Flex-Zeilen verteilt werden.

css

#box-no-balance {
  flex-line-count: 6;
  flex-wrap: wrap;
}

#box1 {
  flex-line-count: 3;
}

#box2 {
  flex-line-count: 4;
}

#box3 {
  flex-line-count: 5;
}

Wir haben den Rest des CSS der Übersichtlichkeit halber verborgen.

Ergebnisse

Beachten Sie Folgendes:

Da der erste Flex-Container das Schlüsselwort balance nicht in seinem flex-wrap Wert gesetzt hat, erhalten seine Kinder keine ausgeglichene Verteilung und sein flex-line-count Wert wird ignoriert.
Die flex-line-count: 3 Deklaration des zweiten Flex-Containers beeinflusst das Layout der Flex-Kinder nicht; da die Flex-Elemente standardmäßig über vier Flex-Zeilen verteilt werden, hat jeder Wert von 4 oder weniger keine Auswirkung.

Erstellung ausgewogener Spalten

Dieses Beispiel veranschaulicht, wie flex-line-count verwendet werden kann, um einen ausgewogenen Satz von zwei Spalten zu erstellen.

HTML

Wir fügen ein <ol> Element ein, das zehn <li> Elemente enthält.

html

<ol>
  <li>
    <a href="#">The Silent Cartographer</a>, published by Meridian House,
    released March 12, 2014.
  </li>
  <li>
    <a href="#">Echoes of the Fallow Field</a>, published by Northbridge Press,
    released July 4, 2009.
  </li>

  ...
</ol>

<ol>
  <li>
    <a href="#">The Silent Cartographer</a>, published by Meridian House,
    released March 12, 2014.
  </li>
  <li>
    <a href="#">Echoes of the Fallow Field</a>, published by Northbridge Press,
    released July 4, 2009.
  </li>
  <li>
    <a href="#">A Ledger of Small Regrets</a>, published by Ashwood & Kline,
    released November 21, 2017.
  </li>
  <li>
    <a href="#">The Clockmaker's Daughter's Shadow</a>, published by Hollow Pine
    Publishing, released February 8, 2011.
  </li>
  <li>
    <a href="#">Salt and Signal</a>, published by Redcliffe Editions, released
    September 30, 2019.
  </li>
  <li>
    <a href="#">Under a Borrowed Sky</a>, published by Fenwick & Marsh, released
    May 16, 2006.
  </li>
  <li>
    <a href="#">The Last Cartel of Winter</a>, published by Graywolf Bindery,
    released January 2, 2021.
  </li>
  <li>
    <a href="#">Notes from an Unfinished Atlas</a>, published by Coastline
    Books, released June 27, 2013.
  </li>
  <li>
    <a href="#">The Weight of Empty Rooms</a>, published by Draymoor House,
    released October 15, 2008.
  </li>
  <li>
    <a href="#">A Brief History of Almost Everyone</a>, published by Ferngate
    Press, released April 9, 2022.
  </li>
</ol>

CSS

Wir setzen die display des Listelements auf flex. Wir setzen einen flex-direction Wert von column und einen flex-wrap Wert von balance mit der flex-flow Kurzschreibweise, damit die Flex-Zeilen in Spalten angeordnet sind und beim Umbruch ausbalanciert werden. Der gap Wert 10px 40px gibt einen Abstand von 10px zwischen Flex-Elementen innerhalb jeder Spalte und 40px zwischen Flex-Zeilen an.

Schließlich setzen wir einen flex-line-count Wert von 2, was bedeutet, dass, obwohl keine feste Höhe für die Liste festgelegt ist, ihr Inhalt immer über zwei ausgewogene Spalten umgebrochen wird, unabhängig davon, wie viel Inhalt enthalten ist.

css

ol {
  display: flex;
  gap: 10px 40px;
  flex-flow: column balance;
  flex-line-count: 2;
}

* {
  box-sizing: border-box;
}

body {
  padding: 10px 30px;
}

@supports not (flex-line-count: 3) {
  body::before {
    content: "Your browser does not support the flex-line-count property.";
    background-color: wheat;
    text-align: center;
    padding: 1rem 0;

    z-index: 1;
    position: fixed;
    inset: 40% 0 auto;
  }
}

Wir haben den Rest des CSS der Übersichtlichkeit halber verborgen.