Reihen gleicher Höhe in einem Flexbehälter

Wie Sie sehen können, haben die list-itemsin der ersten rowgleich height. Aber die Elemente in der zweiten rowhaben andere heights. Ich möchte, dass alle Gegenstände eine Uniform haben height.

Gibt es eine Möglichkeit, dies ohne feste Höhe und nur mit Flexbox zu erreichen ?

Hier ist mein code

.list {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

Die Antwort ist nein.

Der Grund ist in der Flexbox-Spezifikation angegeben:

6. Flex Lines

In einem mehrzeiligen Flex-Container ist die Kreuzgröße jeder Linie die Mindestgröße, die erforderlich ist, um die Flex-Elemente in der Linie aufzunehmen.

Mit anderen Worten, wenn sich in einem zeilenbasierten Flex-Container mehrere Linien befinden, ist die Höhe jeder Linie (die "Kreuzgröße") die Mindesthöhe, die erforderlich ist, um die Flex-Elemente in der Linie aufzunehmen.

Zeilen gleicher Höhe sind jedoch im CSS-Rasterlayout möglich:

• Zeilen gleicher Höhe im CSS-Rasterlayout

Andernfalls ziehen Sie eine JavaScript-Alternative in Betracht.

Sie können dies jetzt erreichen mit display: grid:

.list {
  display: grid;
  overflow: hidden;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  max-width: 500px;
}
.list-item {
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  margin-bottom: 20px;
}
.list-content {
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
      <h2>box 1</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>

  <li class="list-item">
    <div class="list-content">
      <h3>box 2</h3>
      <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

Obwohl das Raster selbst keine Flexbox ist, verhält es sich sehr ähnlich wie ein Flexbox- Container, und die Elemente im Raster können flexibel sein .

Das Rasterlayout ist auch sehr praktisch, wenn Sie reaktionsschnelle Raster wünschen. Das heißt, wenn das Raster eine andere Anzahl von Spalten pro Zeile haben soll, können Sie einfach Folgendes ändern grid-template-columns:

grid-template-columns: repeat(1, 1fr); // 1 column
grid-template-columns: repeat(2, 1fr); // 2 columns
grid-template-columns: repeat(3, 1fr); // 3 columns

und so weiter...

Sie können es mit Medienabfragen mischen und je nach Seitengröße ändern.

Leider gibt es immer noch keine Unterstützung für Containerabfragen / Elementabfragen in den Browsern (sofort einsatzbereit), damit die Anzahl der Spalten entsprechend der Containergröße und nicht der Seitengröße geändert werden kann (dies wäre sehr hilfreich mit wiederverwendbaren Webkomponenten).

Weitere Informationen zum Rasterlayout:

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout

Unterstützung des Grid-Layouts für alle Browser:

https://caniuse.com/#feat=css-grid

Nein, das können Sie nicht erreichen, ohne eine feste Höhe festzulegen (oder ein Skript zu verwenden).

Hier sind zwei meiner Antworten, die zeigen, wie man mit einem Skript so etwas erreicht:

• Wie bekomme ich einen Header von Karten oder ähnlichem, um mit der Flexbox die gleiche Höhe zu haben?

• Gleiche Höhe für Flex-Artikel im Flex-Richtungssäulen-Flex-Container

Wenn Sie die Elemente kennen, die Sie zuordnen, können Sie dies tun, indem Sie jeweils eine Zeile ausführen . Ich weiß, dass es eine Problemumgehung ist, aber es funktioniert.

Für mich hatte ich 4 Artikel pro Reihe, also habe ich es mit jeder Reihe in zwei Reihen zu je 4 aufgeteilt height: 50%, loswerden flex-grow, haben <RowOne />und <RowTwo />in einem <div>mit flex-column. Dies wird den Trick tun

<div class='flexbox flex-column height-100-percent'>
   <RowOne class='flex height-50-percent' />
   <RowTwo class='flex height-50-percent' />
</div>

Dies scheint in Fällen mit fester Elternhöhe zu funktionieren (getestet in Chrome und Firefox):

.child {
        height    : 100%;
        overflow  : hidden;
}

.parent {
        display: flex;
        flex-direction: column;
        height: 70vh; // ! won't work unless parent container height is set
        position: relative;
}

Wenn es aus irgendeinem Grund nicht möglich ist, Gitter zu verwenden, ist dies möglicherweise die Lösung.

Sie können mit Flexbox:

ul.list {
    padding: 0;
    list-style: none;
    display: flex;
    align-items: stretch;
    justify-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
li {
    width: 100px;
    padding: .5rem;
    border-radius: 1rem;
    background: yellow;
    margin: 0 5px;
}

<ul class="list">
  <li>title 1</li>
  <li>title 2<br>new line</li>
  <li>title 3<br>new<br>line</li>
</ul>

In Bezug auf die in der ersten Antwort erwähnte interaktive alternative Lösung ... Das Erzwingen, dass die Flex-Spalten in allen Zeilen dieselbe Höhe haben, kann beim Laden mit jQuery erfolgen:

$(function () {
    // Set the cards height to be the same in all lines
    $('.same-wrap-height').each(function () {
        let heighest = 0;

        $('.new-card', this).each(function () {
            if ($(this).height() > heighest) {
                heighest = $(this).height();
            }
        });

        $('.new-card', this).height(heighest);
    });
});

Mein Bootstrap-Layout:

<div class="row same-wrap-height">
    <div class="col-lg-6 ... new-card">
        <div class="card h-100">
            ...
        </div>
    </div>

    <div class="col-lg-6 ... new-card">
        <div class="card h-100">
            ...
        </div>
    </div>
</div>

In Ihrem Fall wird die Höhe automatisch berechnet, daher müssen Sie die Höhe
angeben

.list-content{
  width: 100%;
  height:150px;
}

Sie können dies tun, indem Sie die Höhe des "P" -Tags oder die Höhe des "Listenelements" festlegen.

Ich habe getan, indem ich die Höhe von "P" festgelegt habe.

und Überlauf sollte versteckt sein.

.list{
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: flex;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}
p{height:100px;overflow:hidden;}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>
</ul>

Bei gleicher Höhe sollten Sie die Eigenschaften Ihrer CSS-Anzeige ändern. Weitere Einzelheiten finden Sie im angegebenen Beispiel.

.list{
  display: table;
  flex-wrap: wrap;
  max-width: 500px;
}

.list-item{
  background-color: #ccc;
  display: table-cell;
  padding: 0.5em;
  width: 25%;
  margin-right: 1%;
  margin-bottom: 20px;
}
.list-content{
  width: 100%;
}

<ul class="list">
  <li class="list-item">
    <div class="list-content">
    <h2>box 1</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  
    <li class="list-item">
    <div class="list-content">
    <h3>box 2</h3>
    <p>Lorem ipsum dolor</p>
    </div>
  </li>
  <li class="list-item">
    <div class="list-content">
      <h1>h1</h1>
    </div>
  </li>