Reihen gleicher Höhe in einem Flexbehälter

90

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 ?

Geben Sie hier die Bildbeschreibung ein

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>
Erweitern Sie das Snippet

html css flexbox Jinu Kurian
quelle
Eine Möglichkeit besteht darin, die Höhe des Elements
festzulegen, deren

Antworten:

78

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:

Andernfalls ziehen Sie eine JavaScript-Alternative in Betracht.

Michael Benjamin
quelle
Ist das CSS-Grid derzeit sicher zu verwenden?
Alexander Kim
40

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>
Erweitern Sie das Snippet

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

Lucas Basquerotto
quelle
Dies ist die Art von "Können" -Ansatz, die ich mag! Vielen Dank auch für das Arbeitsbeispiel
Hananamar
0

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>
Kevin Danikowski
quelle
0

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.

Stanislav E. Govorov
quelle
0

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>
Erweitern Sie das Snippet

Hisham Dalal
quelle
0

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>
Sky7ure
quelle
-1

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

.list-content{
  width: 100%;
  height:150px;
}
Tom
quelle
Es tut mir leid, die Höhe kann mit dem Inhalt variieren. Kann also keine feste Höhe geben.
Jinu Kurian
Die Höhen werden automatisch berechnet. Bei unterschiedlichen Inhalten sind die Höhen also unterschiedlich. Sie müssen daher eine feste Höhe verwenden, da Sie sonst keine einheitlichen Höhen erhalten können.
Tom
-3

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>

Ajay Malhotra
quelle
Scheint nicht die Antwort zu sein, nach der ich suche. Wenn der Inhalt größer wird, wird er ausgeblendet.
Jinu Kurian
@JinuKurian, wo ich Überlauf hinzufüge: versteckt, Wenn Sie dies in Überlauf: automatisch ändern, wird ein Bildlauf angezeigt. dann können Sie auch vollen Inhalt sehen
Ajay Malhotra
-6

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>

Ankit
quelle
Danke, aber ich möchte die Listen in mehreren Zeilen anzeigen.
Jinu Kurian