Ich erstelle eine React-App, die xy Karten und ein einzelnes Widget in einem Flex-Container rendert. Alle Karten haben die gleiche Breite und Höhe, aber die Höhe des Widgets ist gleich 卡片高度 * 2 + row-gap. Die Breite des Containers ändert sich je nach Breite des Ansichtsfensters und sollte optisch wie 2 bzw. 3 Spalten mit Karten aussehen. Zur besseren Übersichtlichkeit habe ich ein Modellbild des erforderlichen Layouts bereitgestellt, wobei die Widgets in Blau dargestellt sind.
Egal, was ich versuche, ich kann die Widgets nicht an der richtigen Position anzeigen lassen, ohne die Höhe der Zeile entsprechend ihrer Größe zu ändern, sodass eine „leere Zeile“ verbleibt, in der 1 oder 2 weitere Karten gerendert werden sollten, wie unten gezeigt.
Meine aktuelle Lösung beinhaltet Javascript und je nach Breite des Ansichtsfensters lade ich 2 oder 4 Karten in einen separaten kleinen Flex-Container, der als erstes untergeordnetes Element des Haupt-Flex-Containers gerendert wird. Diese Problemumgehung funktioniert optisch hervorragend, macht meinen Code jedoch komplexer, da ich viele verschiedene Situationen abdecken muss, damit er ordnungsgemäß funktioniert. Ich würde das gleiche Ziel gerne mit CSS/Flexbox erreichen, aber ich bin noch Anfänger und habe noch nie ein solches Layout erstellt und habe offensichtlich keine Ahnung, wie das geht. Das Widget kann nicht 绝对定位, da dies die Scroll-Funktionalität seiner untergeordneten Elemente beeinträchtigen würde.
Ich stelle HTML- und CSS-Testmessungen im richtigen Verhältnis zur Verfügung, falls es hilft.
.container {
margin: 50px 300px;
display: flex;
flex-wrap: wrap;
row-gap: 20px;
column-gap: 20px;
min-width: 320px; /* Width for 2 columns */
max-width: 490px; /* Width for 3 columns */
border: 3px solid rgb(0, 22, 117);
}
.card {
width: 150px;
height: 100px;
background-color: bisque;
}
.widget {
height: 220px; /* card height * 2 + row-gap */
width: 150px;
background-color: rgb(134, 204, 245);
}
<div class="container"> <div class="widget"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> <div class="card"></div> </div> <!-- Original jsx <div className='container'> <div className='widget'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> <div className='card'></div> </div> -->
Ich würde wirklich gerne lernen, wie man ein Layout wie dieses in Flexbox erstellt, nicht nur für mein aktuelles Projekt, sondern auch, um mein Wissen und Verständnis zu erweitern. Wenn Sie Ideen zur Lösung dieses Problems haben, helfen Sie mir bitte. Vielen Dank im Voraus :)
这可以使用网格布局来完成，无需 JavaScript，下面是一个示例：
.container { margin: 50px 300px; display: grid; /* auto calculate columns, minimun cell width is 140px */ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); /* height of each cell */ grid-auto-rows: 100px; grid-auto-flow: row dense; gap: 20px; min-width: 320px; max-width: 490px; border: 3px solid rgb(0, 22, 117); } .card { background-color: bisque; } .widget { background-color: rgb(134, 204, 245); /* widget, span for 2 rows */ grid-row: auto / span 2; /* set the widget to the right most column */ grid-column-end: -1; }正如@ralph.m 提到的。您始终可以通过将
，在最右侧的列上设置grid-column-end: -1;设置为.widget.widget>Flexbox 布局无法做到这一点，它不会创建 2d 网格，您必须使用 gridbox 布局。，因此元素可以跨越行和列而不留间隙。
这是一个例子：
.grid { /* give some space gutters */ margin: 1em auto; padding:1em; gap: 1em; /* build a grid */ display: grid; grid-auto-flow: row dense;/* fill any holes that could show up */ grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); /* auto calculate size of the grid */ grid-auto-rows: 75px; /* give an height row for the demo */ max-width: 80%;/* whatever */ border: solid;/* see my boundaries */ } .card { background-color: salmon; } .bigger { background-color: lightblue; grid-row: 1/ span 2;/* keep me on first row and lay over 2 rows */ grid-column-end: -1; /* keep me on the last column no matter how many */ }