webentwicklung-frage-antwort-db.com.de

Reihen gleicher Höhe in einem Flexbehälter

Wie Sie sehen, haben die list-items in der ersten row die gleichen height. Elemente im zweiten row haben jedoch unterschiedliche heights. Ich möchte, dass alle Artikel ein einheitliches height haben.

 enter image description here

Gibt es eine Möglichkeit, dies zu erreichen, ohne feste Höhe anzugeben und nur flexbox zu verwenden?

Hier ist meine 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>

32
Jinu Kurian

Die Antwort ist nein.

Der Grund ist in der Flexbox-Spezifikation angegeben:

6. Flexleitungen

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

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

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

Ansonsten erwägen Sie eine JavaScript-Alternative.

41
Michael_B

Das kannst du jetzt mit display: grid erreichen:

.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 zu einem Flexbox -Container, und die Elemente innerhalb des Gitters können Flex sein.

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

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 Größe der Seite ändern.

Leider gibt es noch keine Unterstützung für container-Abfragen/Elementabfragen in den Browsern (out of the box), damit die Anzahl der Spalten entsprechend der Containergröße und nicht der Seitengröße geändert werden kann (dies würde der Fall sein) großartig für wiederverwendbare Webkomponenten sein).

Weitere Informationen zum Rasterlayout:

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

Unterstützung des Grid Layouts für Browser: 

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

9

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


Hier sind zwei Antworten von mir, die zeigen, wie man ein Skript benutzt, um so etwas zu erreichen:

3
LGSon

Dies scheint in Fällen mit fester übergeordneter Hö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 nicht möglich ist, Raster aus irgendeinem Grund zu verwenden, ist es vielleicht die Lösung.

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

Für mich hatte ich 4 Elemente pro Reihe, also habe ich es in zwei Reihen von 4 mit jeder Reihe height: 50% aufgeteilt, flex-grow loswerden, <RowOne /> und <RowTwo /> in einem <div> mit flex-column haben. Das 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>
0