Hi,
ich bin langsam am Verzweifeln, weil ich einfach nicht das gewünschte Verhalten erreiche.
Was möchte ich?
Wie beschreibe ich das am besten?! Eigentlich ein dynamisches Tabellenlayout, dessen Anzahl an Spalten und deren Breite sich nach der Breite der Tabelle richten...
Ich habe also eine dynamische Anzahl Elemente mit einer Mindestbreite (alle gleich breit) und es sollen soviel Elemente wie möglich in einer Zeile dargestellt werden (die restlichen in den weiteren Zeilen). So wie man das durch float:left einfach erreichen kann.
Allerdings sollen die Spalten dabei über die gesamt zur Verfügung stehende Breite skalieren.
Beispiel:
Die Elemente haben eine Mindesbreite von 100px.
Der Container ist 300px breit:
=> Es sollen drei Elemente pro Zeile dargestellt werden.
Der Container skaliert auf 350px:
=> Es sollen drei Elemente pro Zeile dargestellt werden, die übrigen 50px werden gleichmäßig auf die drei Spaltenbreiten aufgeteilt
Der Container skaliert auf 400px
=> Es sollen vier Elemente pro Zeile dargestellt werden.
usw.
Das klingt nun erstmal nach einem Fall für eine Flexbox. Mit flex-wrap:wrap; und einer Mindestbreite, lasst sich das Prinzip auch FAST realisieren.
Hier stellt sich nun aber das Problem ein, dass die Elemente in der letzten Zeile auch auf die gesamte Breite skalieren -> logisch.
Es sollen aber immer alle Spalten gleich breit sein, sodass auch die Elemente der letzten Zeile in vertikalen Linie mit den oberen Elementen stehen.
Das ruft dann eigentlich wieder nach einem Grid mit auto-fit, allerdings erreiche ich hierbei keine flexible Anpassung der Spaltenbreite. Viel mehr verhält es sich wie bei einem float:left.
Was ich bräuchte wäre also eine Mischung aus dem Verhalten eines Grids (alle Spalten gleich breit) und einer Flexbox (Skalierung der Spaltenbreite auf übrigen Platz (< Mindestbreite)
Ist das überhaupt mit CSS realisierbar?
Vielen Dank und beste Grüße
Q