Wie kann ich Artikel mit gleicher Breite auch nach dem Verpacken erreichen?

Flexible Artikel mit gleicher Breite auch nach dem Einpacken

Im Bereich der CSS-Positionierung kann es eine Herausforderung darstellen, gleiche Breiten für flexible Artikel auch nach dem Einpacken zu erreichen. Flexbox, ein leistungsstarkes Layoutmodul, bietet keine native Lösung für dieses Szenario.

Aktuelle Flexbox-Implementierungen verfügen nicht über die Möglichkeit, flexible Elemente gleichmäßig in der letzten Zeile oder Spalte auszurichten. Diese Einschränkung ist in der aktuellen Spezifikation verankert und bleibt ungelöst.

Eine ausführlichere Analyse und alternative Ansätze zur Behebung dieses Problems finden Sie in den folgenden relevanten Ressourcen:

• [Größenflexibilität Artikel auf dem letzten Zeile](https://stackoverflow.com/questions/34259120/sizing-flex-items-on-the-last-row)
• [Ist es möglich, dass flexible Elemente eng an den darüber liegenden Elementen ausgerichtet sind? ?](https://css-tricks.com/flexbox-tightly-align-last-row/)

Jedoch außerhalb von Flexbox, CSS Grid Layout bietet eine unkomplizierte Lösung für dieses Problem:

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  grid-auto-rows: 20px;
  grid-gap: 5px;
}

.item {
  background: yellow;
  text-align: center;
  border: 1px solid red;
}

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
</div>

Mit dieser CSS Grid-Lösung können Sie flexible Elemente mühelos mit gleicher Breite ausrichten, selbst wenn sie auf mehrere Zeilen umgebrochen werden.

Das obige ist der detaillierte Inhalt vonWie kann ich Artikel mit gleicher Breite auch nach dem Verpacken erreichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!