Beiträge von Questioner

Super! Vielen Dank ihr beiden!!! Ich hatte den Ansatz zwar schon, aber igendwie hat es nicht funktioniert...

Wahrscheinlich lag der Fehler aber wo ganz anderes...

Aber jetzt funktioniert es! DANKE!

Ok, das wäre schon. Aber wie erreiche ich es bei einer flexbox, dass die Elemente in der letzten Spalte nicht gesamte Breite einnehmen sondern sich nach der Breite der Elemente in vollen Zeilen richten?

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

Zitat von Sempervivum

Das hat natürlich immer noch seine Berechtigung. Man müsste aber auch die Begründung dieser Forderung berücksichtigen: Wenn ich es richtig verstehe, soll dadurch lesbarer, übersichtlicher und leicht zu ändernder Code entstehen.

Ja, nein - jein... Im Grunde möchte ich mich nach so vielen Jahren Abstinenz wieder mehr mit dem Thema beschäftigten und versuche gerade alles aufzuarbeiten, was sich in der Zwischenzeit so geändert hat.

Zitat von Sempervivum

Wenn auf der anderen Seite aber eine Situation entsteht:

kann durch Trickserei dieses Ziel in das Gegenteil verkehrt werden und ich würde eine Lösung bevorzugen, mit einem Skript eine geradlinige Berechnung durchzuführen.

Das kommt natürlich auf die Trickserei an. Es gibt sehr viele gängien "Tricks" im CSS-Bereich, die man kennen sollte. Ich dachte, hier gibt es vielleicht auch etwas in die Richtung...

Zitat von Sempervivum

Oder man denke an die Aufgabe, eine Reihe von Containern unabhängig vom Inhalt auf gleiche Höhe einzustellen. Bevor es Flexlayout gab, nur mit Javascript zu lösen (oder gab es doch irgend welche Tricks mit CSS?).

Ich glaube die Anforderung verstehe ich nicht...

Unabhängig vom Inhalt heißt für mich die Höhe vorzugeben... Also kann ich allen Containern die gleiche Höhe geben - absolut oder prozentual.

Aber wie gesagt, ich glaube die Problemstellung nicht verstanden zu haben... Wobei ich mich nun mal aus dem Fenster lehnen und behaupten würde, man könne das gesamte Verhalten von Flex-Boxen ausschließlich mit CSS (und ein paar Containern mehr) abbilden.

Also schon mal vielen Dank für deine Antwort!

Hmmm... Irgendwie widersteht es mir schon Degin und Script zu vermengen. Insbesondere, da CSS ja eigentlich unter anderem daraus entstanden ist, um Inhalt und Design-Angaben zu trennen.

Jetzt mit JS zu designen - ich weiß nicht - wirkt für mich wie ein Sakrileg

Das kommt vielleicht noch aus alten Tagen... ist nun über 10 Jahre her, dass ich mich zuletzt so intensiv mit der Materie beschäftigt habe und es ist seither ja viel passiert... Responsive-Design, viele neue HTML-Elemente und CSS-Attribute und Konstrukte, wie Grids und Flex-Boxen gab es damals nicht. Da wurde gerade angefangen das Tabellen-Layout zu verteufeln.

Und irgendwie habe ich es auch bisher immer mit irgendwelchen Tricks geschafft, zumindest das Layout ohne JS aufzubauen und auch - zumindest im Frontend - weitestgehend auf JS zu verzichten...

Ich weiß nicht wirklich wie ich es beschreiben soll... Ich habe habe eine dynamische Anzahl Divs, die links floaten und horizontal gescrollt werden können. Die dargestellten Divs sollen dabei solange den verfügbaren Platz ausfüllen (also eine flexible Breite haben), bis ein weiteres Div von mindestens 190px Breite vollständig angezeigt werden kann.

Hmmm...

Ich habe hier mal einen "funktionierenden" Beispielcode beigefügt:

<html>
<head>
<style>

.outerContainer{
    height:90px;
    width: 100%;
    background:#ff0000;
    --childNodes:6;
    --showNodes:1;
    overflow-x:scroll;
    overflow-y:hidden;
}

.outerContainer .scrollContainer {
    width: calc(100% / var(--showNodes) * var(--childNodes));
    background:#00ff00;
    height:100%;
}

.outerContainer .scrollContainer .bt{
    float:left;
    background: #0000ff;
    width: calc(100% / var(--childNodes));
    box-sizing:border-box;
    height:100%;
    text-align:center;
    border: 1px solid #000;
}

@media screen and (min-width: 180px) {
    .outerContainer{
        --showNodes:2;    
    }
}
@media screen and (min-width: 270px) {
    .outerContainer{
        --showNodes:3;    
    }
}
@media screen and (min-width: 360px) {
    .outerContainer{
        --showNodes:4;    
    }
}
@media screen and (min-width: 450px) {
    .outerContainer{
        --showNodes:5;    
    }
}
@media screen and (min-width: 540px) {
    .outerContainer{
        --showNodes:6;    
    }
}
@media screen and (min-width: 630px) {
    .outerContainer{
        --showNodes:7;    
    }
}
@media screen and (min-width: 720px) {
    .outerContainer{
        --showNodes:8;    
    }
}

</style>
<body>

    <div class="outerContainer">
        <div class="scrollContainer">
            <div class="bt">BT1</div>
            <div class="bt">BT2</div>
            <div class="bt">BT3</div>
            <div class="bt">BT4</div>
            <div class="bt">BT5</div>
            <div class="bt">BT6</div>
        </div>
    </div>

</body>
</html>

Im Grunde funktioniert das Ganze so ja auch.

Über die CSS-Variablen --childNodes (Anzahl aller Divs im scrollContainer) und --showNodes (Anzahl der Divs, die bei einer bestimmten (Seiten-)Breite angezeigt werden), lässt sich das Verhalten steuern. Die Variable --childNodes wird dabei via PHP oder JS gefüllt während --showNodes durch unterschiedliche Media-Queries variiert.

Das funktioniert, so lange der scrollContainer maximal so breit ist, dass alle Divs angezeigt werden. Wird noch größer, skalierten die Divs nicht mehr, um den gesamten verfügbaren Platz auszufüllen.

Um das Problem zu lösen gibt es nun m.M. nach zwei Optionen:

1. "Überflüssige" Media-Queries entfernen

Natürlich würde es schon helfen, alles Media-Queries zu entfernen, die für --showNodes eine höhere Anzahl vorsehen, als tatsächlich vorhanden sind. Ich empfinde es allerdings als extrem unschönen Stil CSS dynamisch zu generieren und würde es gerne - soweit wie möglich - auf ein absolutes Minimum beschränken. Das dynamische setzen der --childNodes ist schon... Naja...

2. CSS-Funktion min()

Könnte ich im scrollContainer die Berechnung der Breite um die CSS-Funktion min() erweitern, wäre dies eigentlich mein favorisiertes Ziel! Voll dynamisch, 100% valide und ohne dynamische Generierung.

.outerContainer .scrollContainer {
    width: calc(100% / min(var(--showNodes), var(--childNodes)) * var(--childNodes));
    background:#00ff00;
    height:100%;
}

Allerdings ist der Support von min() - gelinde gesagt - suboptimal...

Daher wollte ich einfach mal offen fragen, ob irgendjemand eine Idee hat, wie ich das Problem dennoch ohne Skripting lösen kann und/oder ob ich mit diesem Konstrukt schon völlig auf dem Holzweg bin und man dies ggf. besser/einfacher/konformer/etc. lösen könnte...

Für eventuelle Lösungs- oder Verbesserungsvorschläge wäre ich sehr dankbar!!!

LG

Q