Probleme mit flexbox

[avm75]

Hallo zusammen,

ich bin neu hier und falle gleich mit einer Vielzahl von Problemen ins Haus bzw. ins Forum. Vor einigen Jahren habe ich mir autodidaktisch und rudimentär html, php und css beigebracht. Seitdem ist viel Zeit ins Land gegangen und ich habe mehr vergessen, als behalten. Zudem hat sich offensichtlich einiges geändert. Ich möchte gerne eine Seite generieren, welche später auf einem Raspberry-Webserver liegen soll. Der Raspberry dient dann als Lieferant für verschiedene Daten, welche er von Sensoren bekommt. Das ganze soll dann in ein Wohnmobil installiert werden. Im Wohnmobil wird es ein Touch-Display geben, auf dem die Website statisch angezeigt werden soll. Zusätzlich soll diese aber auch von außen zugänglich sein, und zwar vom Handy, genauso wie vom PC oder Tablet. Also responsiv. Angefangen habe ich, aber ich komme nicht weiter. Irgendwo wird immer falsch dargestellt oder skaliert. Den aktuellen Stand findet ihr hier

Aussehen soll es eigentlich so: Und zwar auf allen 3 Gerätetypen gleich, solange es im Querformat/Landscape angezeigt wird. Wenn das Gerät gedreht wird, vorrangig also bei Tablets oder Smartphones, soll es so aussehen:

Davon bin ich weit entfernt, wie man auf der Seite sieht. Kann oder mag mir jemand den entscheidenden Hinweis geben, was ich falsch mache?

Danke im voraus

[j4nk3y]

Hallo,

Das ist relativ einfach gemacht, jedenfalls wenn die Reihenfolge egal ist. Ansonsten mit order: X; anpassen. Dazu einfach container1 und container2 nicht als flex-direction: row; anordnen sonder flex-direction: column;.

das dann in einem Media wechseln:

@media screen and (max-width: XYZpx)
{
	container1, container2
	{
		flex-direction: column;
	}
}

Sehr schöne Idee, darf ich fragen wie das mit der sensorik und dem PI gemacht wird?

Gruß
Jo

[avm75]

Hallo,

danke für Deine Antwort. Das mit der Reihenfolge habe ich tatsächlich sogar schon hinbekommen. Grundsätzlich werden die Grafiken ja auch skaliert, aber eben nicht richtig. Auf's Handy kriege ich es nicht passend, wenn der Bildschirm zu groß wird auch nicht. Zumal die Grafiken auch noch unterschiedlich groß sind. Die beiden für Uhrzeit und Kalender sind ja kleiner, im Portrait sollen aber alle gleich groß sein.

Soll ich mal den CSS Code posten?

Bezüglich der Sensorik bin ich noch nicht festgelegt. Im Grunde ist die Idee, die von den verschiedenen Sensoren gelieferten Werte in eine Datenbank zu schreiben, aus dieser wiederum holt die Seite die Daten. Ich fange gerade erst mit PI und Arduino an und bin noch nicht weit genug, um konkret sagen zu können, wie ich es nachher löse.

[j4nk3y]

Hey,

Soll ich mal den CSS Code posten?

Alles ist denk ich unnötig. Anmerkung dazu, in den media selector brauch nur das was geändert wird, da muss nicht noch einmal alles neu deklariert werden.

Bezüglich der Sensorik bin ich noch nicht festgelegt. Im Grunde ist die Idee, die von den verschiedenen Sensoren gelieferten Werte in eine Datenbank zu schreiben, aus dieser wiederum holt die Seite die Daten. Ich fange gerade erst mit PI und Arduino an und bin noch nicht weit genug, um konkret sagen zu können, wie ich es nachher löse.

Vorallem frage ich mich gerade wie der PI im Wohnmobil Internetzugang bekommt.

Gruß
Jo

[avm75]

Vorallem frage ich mich gerade wie der PI im Wohnmobil Internetzugang bekommt.

Das ist so kompliziert nicht. Entweder über einen UMTS-Stick oder einen UMTS Router. Aktuell ist der Plan, dass der PI selbst zum AccessPoint wird ;-)

Hier mal der CSS-Code:

@charset "utf-8";
/* CSS Document */

body {
	background: #000;
	padding: 20px;
	font-family: 'Open Sans', sans-serif;
    color:#fff;	
}

#display {
	padding:20px;
	width:97%;
	background:#0f0f0f;
}


#anzeige {
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
	
	-webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal; 
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center; 

    width:100%;
}

.button-small {
	flex: 2 50%;
}

.img-small {
	width:130px;
	height:130px;
}

#container1 {
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

	width:100%;
}

#container2 {
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

	width:100%;
}

.button-big {
	flex: 2 100%;
}

.img-big {
	width:230px;
	height:230px;
}

img {
	max-width:100%;
	height:100%;
	margin:20px;
}

@media screen 
and (orientation:portrait)
{

#steuerung {
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: row;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

	width:100%;
	
}

#container1 {
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: column-reverse;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

	width:50%;
}

#container2 {
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-box-orient: horizontal; 
    -moz-box-orient: horizontal;
    box-orient: horizontal;
    flex-direction: column-reverse;

    -webkit-box-pack: center;
    -moz-box-pack: center;
    box-pack: center;
    justify-content: center;

    -webkit-box-align: center;
    -moz-box-align: center;
    box-align: center;  
    align-items: center;

	width:50%;
}
}

Ziel ist halt, dass alles im Landscape auf das Handy passt, aber auch auf dem PC oder Tablet ordentlich skaliert ist. Im Portrait Modus am Handy sollen die Container 1 und 2 50% der Bildbreite einnehmen, die Buttons alle gleich groß sein und die (noch gar nicht im Quelltext vorhandene) Uhrzeit und das Datum "verschwinden". Ich kann nicht mal sagen, der wievielte Versuch das jetzt ist... :-(

[Gunnar Bittersmann]

@@avm75

@charset "utf-8";

Wenn deine HTML-Ressourcen auch UTF-8-codiert sind, kann die Angabe weg.

body {
	background: #000;
	padding: 20px;
	font-family: 'Open Sans', sans-serif;
    color:#fff;	
}

#display {
	padding:20px;
	width:97%;
	background:#0f0f0f;
}

Wozu hat #display nochmal Padding, wo body schon Padding hat?

97%? Magic number? Was sind die fehlenden 3%? Die 20px? Manchmal vielleicht. Oder auch nicht.

Verwende 100% (da Default also gar keine Angabe) und das Box-Modell, wo das Padding in der Breite enthalten ist.

Aber wozu ist das <div id="display"> überhaupt da? Du hast bereits genügend Container. Weg damit!

#anzeige {
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

Ich nehme an, das Zeugs ist nicht für die Weltöffentlichkeit, sondern einen eng überschaubaren Nutzerkreis? Von dem du die verwendeten Geräte/Browser kennst? Dann kannst du bestimmen, welche Vendor-Präfixe du noch brauchst. Vermutlich gar keine.

LLAP 🖖

[avm75]

Hi, danke für Deine Antwort!

Wenn deine HTML-Ressourcen auch UTF-8-codiert sind,

Sind sie, ja. Mache ich weg. Danke!

Wozu hat #display nochmal Padding, wo body schon Padding hat?

Hm. Gute Frage, ist ja wirklich unnötig.

97%? Magic number? Was sind die fehlenden 3%?

Nicht "Magic", nein. Tatsächlich war das die einzige Möglichkeit in MS Edge eine passende Breite darzustellen. Bei 100% geht der Inhalt über die Bildschirmbreite meines Displays hinaus.

Verwende 100% (da Default also gar keine Angabe) und das Box-Modell, wo das Padding in der Breite enthalten ist.

Werde ich so versuchen.

Aber wozu ist das <div id="display"> überhaupt da? Du hast bereits genügend Container. Weg damit!

Hauptsächlich wegen der Hintergrundfarbe. Bei verschiedenen Buttons soll es später noch eine Detailansicht geben, bei der die Hintergrundfarbe jeweils wechselt.

Ich nehme an, das Zeugs ist nicht für die Weltöffentlichkeit, sondern einen eng überschaubaren Nutzerkreis? Von dem du die verwendeten Geräte/Browser kennst? Dann kannst du bestimmen, welche Vendor-Präfixe du noch brauchst. Vermutlich gar keine.

Stimmt, vorrangig werde ich das selbst benutzen, vielleicht noch meine Frau. Und natürlich kenne ich die verwendeten Geräte und Browser. Ich dachte nur, je genauer ich heute bin, umso besser, man weiss ja nie, was kommt...

Danke für die Hinweise, das setze ich natürlich um. Meine eigentlichen Probleme lösen die jedoch leider noch nicht: -auf meinem Surface ist die Ansicht ok. Wenn ich dort das Browserfenster verkleinere, verkleinern sich die großen Buttons unten, die kleinen Buttons für Kalender und Uhr bleiben in ihrer Größe jedoch. Ich möchte, dass die auch kleiner werden. -auf dem großen Bildschirm am Desktop-PC ist die Seite weder zentriert noch formatfüllend. Eines von beiden sollte gegeben sein. -auf dem Handy passt die Seite im Querformat nicht auf einen Bildschirm. Im Hochformat auch nicht, da sind zusätzlich noch Kalender und Uhr in der falschen Größe, das müsste ich aber hinbekommen. -am Tablet (Galaxy Note 10.1) klappt die Umstellung auf column nicht. Bzw. die Spalten werden nicht angezeigt.

Gruß vom Niederrhein, Andre

[marctrix]

Hej avm75,

Stimmt, vorrangig werde ich das selbst benutzen, vielleicht noch meine Frau. Und natürlich kenne ich die verwendeten Geräte und Browser. Ich dachte nur, je genauer ich heute bin, umso besser, man weiss ja nie, was kommt...

Vendor-Präfixe sind nur für veraltete Browser und sollten nicht mehr verwendet werden.

Meine eigentlichen Probleme lösen die jedoch leider noch nicht:

Mit vw, vh, v-min und v-max kann man Größen abhängig von der Viewportgröße definieren... ;-)

Marc

[Matthias Apsel]

Hallo marctrix,

Vendor-Präfixe sind nur für veraltete Browser und sollten nicht mehr verwendet werden.

Naja. Safari 8, ältere Androiden und den UC-Browser möchte man je nach Zielgruppe vielleicht doch noch unterstützen. (http://caniuse.com/#search=flex)

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

Vendor-Präfixe sind nur für veraltete Browser und sollten nicht mehr verwendet werden.

Naja. Safari 8, ältere Androiden und den UC-Browser möchte man je nach Zielgruppe vielleicht doch noch unterstützen. (http://caniuse.com/#search=flex)

Ausnahmen bestätigen die Regel. Wenn bestimmte Nutzer unterstützt werden sollen können prefixe oder Workarounds nötig sein - sogar bis runter zum IE6 - hatte vor kurzem mit einer Website zu tun, die aus Afrika häufig aufgerufen wurde.

Der OP hatte Vendor-Präfixe aber für die Zukunft eingesetzt (weil man ja nie wissen kann) und ich habe auch geschrieben "Vendor-Präfixe sind nur für veraltete Browser".

Außerdem stehe ich dazu, Vendor-Präfixe für schädlich genug zu halten, diese nicht mehr zu verwenden. Für die Benutzer alter Androiden ist eine falsche Darstellung von Webseiten wohl das geringste Problem.

Safari 8 - na ja. Den UC-Browser kenne ich gar nicht. Was ist das?

Marc

[Matthias Apsel]

Hallo marctrix,

Den UC-Browser kenne ich gar nicht. Was ist das?

https://de.wikipedia.org/wiki/UC_Browser

Bis demnächst
Matthias

[marctrix]

Hej Matthias,

Den UC-Browser kenne ich gar nicht. Was ist das?

https://de.wikipedia.org/wiki/UC_Browser

Danke für den Tipp!

Ob da wohl viele Inder und Chinesen in seinem WoMo hausen werden? - Na ja, man kann ja nie wissen ;-)

Vendor-Präfixe sind böser als eine benutzbare, aber nicht nach den Designvorgaben dargestellte Webseite vorgesetzt zu bekommen. Die fehlende Unterstützung von flexbox stellt ja keine Hürde da.

Marc

[Gunnar Bittersmann]

@@j4nk3y

Ansonsten mit order: X; anpassen.

Nein.

Generell sollte man mit order sehr vorsichtig umgehen. Wenn die visuelle Reihenfolge eine ganz andere ist als die Tab-Reihenfolge bei Tastaturbedienung, ist das für Nuzter ziemlich verwirrend.

Der Nutzerkreis ist hier aber wohl überschaubar. Dennoch braucht man order nicht …

Dazu einfach container1 und container2 nicht als flex-direction: row; anordnen sonder flex-direction: column;.

Nö. Die Reihenfolge der Items soll ja in dem Fall genau andersrum sein. Dafür gibt’s den Wert column-reverse. Siehe Chris Coyiers Complete Guide to Flexbox.

Und die Container container1 und container2 braucht man auch nicht. flex-wrap: wrap existiert.

LLAP 🖖

[j4nk3y]

@@Gunnar Bittersmann

Dazu einfach container1 und container2 nicht als flex-direction: row; anordnen sonder flex-direction: column;.

Und die Container container1 und container2 braucht man auch nicht. flex-wrap: wrap existiert.

Es gibt immer mehrere Möglichkeiten für ein "Problem".

Gruß
Jo

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Nö. Die Reihenfolge der Items soll ja in dem Fall genau andersrum sein. Dafür gibt’s den Wert column-reverse.

Und auch flex-wrap: wrap-reverse ist dann zu setzen. (Gelernt beim Flexbox Froggy.)

Ich hab da mal was gebastelt.

Da das sicherlich Schaltflächen werden sollen, hab ich gleich mal button-Elemente verwendet.

Und da die Buttons aktuelle Messwerte anzeigen, output-Elemente.

Außer der Ein/Aus-Button, der ist per aria-label beschriftet.

LLAP 🖖

[avm75]

Ui, das hat sich überschnitten.

Ich hab da man was gebastelt.

Äh, wow! Darf ich das mal kopieren und damit weiter experimentieren? Wobei ich von Deinem Code quasi noch weniger verstehe, als zuvor ;-)

Da das sicherlich Schaltflächen werden sollen, hab ich gleich mal button-Elemente verwendet.

Richtig. Zumindest teilweise. Der dunkelgrüne ganz unten soll z.B. nur zustandsabhängig die Farbe ändern oder zusätzliche Symbole zeigen. Beim Rest soll tatsächlich was passieren, wenn man drauf drückt ;-)

Und da die Buttons aktuelle Messwerte anzeigen, output-Elemente.

Wieder richtig. Allerdings auch nicht alle. Temperatur, Gas, Wasser, Batterie. Dort werden Meßwerte angezeigt. Beim Rest nicht.

Außer der Ein/Aus-Button, der ist per aria-label beschriftet.

Sagt mir zwar jetzt gar nichts, aber so habe ich wieder was zu lernen.

[Gunnar Bittersmann]

@@avm75

Äh, wow! Darf ich das mal kopieren und damit weiter experimentieren?

Klar. Einfach auf „Fork“ clicken …

Wobei ich von Deinem Code quasi noch weniger verstehe, als zuvor ;-)

Nach ein paar Runden Flexbox Froggy sollte es besser gehen. ;-)

Da das sicherlich Schaltflächen werden sollen, hab ich gleich mal button-Elemente verwendet.

Richtig. Zumindest teilweise. Der dunkelgrüne ganz unten soll z.B. nur zustandsabhängig die Farbe ändern oder zusätzliche Symbole zeigen.

Dann nimmst du dafür kein button-Element.

Und da die Buttons aktuelle Messwerte anzeigen, output-Elemente.

Wieder richtig. Allerdings auch nicht alle. Temperatur, Gas, Wasser, Batterie. Dort werden Meßwerte angezeigt. Beim Rest nicht.

Dann nimmst du dafür kein output-Element.

Außer der Ein/Aus-Button, der ist per aria-label beschriftet.

Sagt mir zwar jetzt gar nichts, aber so habe ich wieder was zu lernen.

Der Button hat ja keinen Text als Beschriftung. (Selbst das -Symbol ist ja Teil des Hintergrundbildes.)

Damit bspw. Screenreader dem Nutzer trotzdem die Funktion des Buttons mitteilen, wird dieser durch dieses ARIA-Attribut beschriftet.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann, @avm75

Nach ein paar Runden Flexbox Froggy sollte es besser gehen. ;-)

http://flexboxfroggy.com/ ;-)

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Nach ein paar Runden Flexbox Froggy sollte es besser gehen. ;-)

http://flexboxfroggy.com/ ;-)

Du liest erst alle Antworten im Thread, bevor du antwortest? (rhetorische Frage) ;-)

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Du liest erst alle Antworten im Thread, bevor du antwortest? (rhetorische Frage) ;-)

Schadet die mehrfache Verlinkung auf flexboxfroggy? (rhetorische Frage) ;-)

Bis demnächst
Matthias

[avm75]

Hallo Gunnar Bittersmann, @avm75

Nach ein paar Runden Flexbox Froggy sollte es besser gehen. ;-)

http://flexboxfroggy.com/ ;-)

Bis demnächst
Matthias

Super, das hilft mir! So kann man wenigstens mal sehen, was man da so tut und versteht es auch! Danke für den Link!

Trotzdem noch zum besseren Verständnis: Der Teich ist in meinem Beispiel das Display bzw. der Bildschirm? Die Seerosenblätter sind die Positionen in den einzelnen Div-Elementen? Und die Frösche sind meine Schaltflächen?

Wenn ich also im Querformat 3 Zeilen haben möchte, von denen die obere nur zwei Frösche, äh, Schaltflächen hat, die mittlere und untere jeweils 5 Schaltflächen haben, dann brauche ich 3 Elemente, innerhalb derer ich mit den Flex-Eigenschaften so anordne, wie ich das haben möchte? Die 3 Elemente wiederum kann ich analog dazu, mit den gleichen Eigenschaften, ebenfalls noch mal anordnen?

Will ich im Hochformat nur 2 Spalten mit je 6 Elementen haben, verändere ich die Eigenschaften für alle 3 Elemente und auch für die Schaltflächen und packe das ganze in media-queries?

Wie verändere ich denn die Größe von den Button-Elementen? Die sind so klein...

[marctrix]

Hej Gunnar,

Damit bspw. Screenreader dem Nutzer trotzdem die Funktion des Buttons mitteilen, wird dieser durch dieses ARIA-Attribut beschriftet.

Oder der Bewohner des Wohnmobils. Schließlich hat der PI einen AudioAusgang und das Radio im WoMo sicher einen Audio-Eingang... ;-)

Dann können Ansagen bei bestimmten Ereignissen (z.B. Temperatur draußen unter Null) auch automatisch erfolgen.

Im nächsten Schritt kommt dann die Spracheingabe (Heizung bitte einschalten) ;-)

Marc

[Gunnar Bittersmann]

@@avm75

Ich hab da man was gebastelt.

Wobei ich von Deinem Code quasi noch weniger verstehe, als zuvor ;-)

Was verstehst du denn nicht?

vmax? Das sind Prozent der Viewportbreite bzw. -höhe, je nachdem, welches größer ist.

Damir hab ich die Größe der Buttons angegeben. Wenn du den Header mit dazutust, musst du da sicher was anpassen.

Oder die Größe der Buttons doch in % angeben? Wird dann schwerer hinzubekommen, dass sie quadratisch sind. Aber das müssen sie ja auch gar nicht sein. Die Buttongröße kann ja auch größer sein als das Hintergrundbild …

LLAP 🖖

[avm75]

@@Gunnar Bittersmann

Was verstehst du denn nicht?

Na, viele der Elemente sind neu für mich. Die Verwendung muss ich halt erst mal lernen. Aber ich les' mich da ein. Dann komme ich mit Fragen ;-) Bis hierher schon mal danke. Werde mal mit Deiner "Bastelei" experimentieren. Dann schauen wir weiter.

Könntest Du noch was zu meiner "Übersetzung" im Hinblick auf Flexbox Froggy sagen? Danke!

[Matthias Apsel]

Hallo avm75,

Könntest Du noch was zu meiner "Übersetzung" im Hinblick auf Flexbox Froggy sagen?

Was meinst du genau?

Bis demnächst
Matthias

[avm75]

Hallo Matthias,

Was meinst du genau?

Den Teil hier meine ich damit:

Trotzdem noch zum besseren Verständnis: Der Teich ist in meinem Beispiel das Display bzw. der Bildschirm? Die Seerosenblätter sind die Positionen in den einzelnen Div-Elementen? Und die Frösche sind meine Schaltflächen?

Wenn ich also im Querformat 3 Zeilen haben möchte, von denen die obere nur zwei Frösche, äh, Schaltflächen hat, die mittlere und untere jeweils 5 Schaltflächen haben, dann brauche ich 3 Elemente, innerhalb derer ich mit den Flex-Eigenschaften so anordne, wie ich das haben möchte? Die 3 Elemente wiederum kann ich analog dazu, mit den gleichen Eigenschaften, ebenfalls noch mal anordnen?

Will ich im Hochformat nur 2 Spalten mit je 6 Elementen haben, verändere ich die Eigenschaften für alle 3 Elemente und auch für die Schaltflächen und packe das ganze in media-queries?

Wie verändere ich denn die Größe von den Button-Elementen? Die sind so klein...

Danke und Gruß André

[avm75]

Dazu einfach container1 und container2 nicht als flex-direction: row; anordnen sonder flex-direction: column;.

Nö. Die Reihenfolge der Items soll ja in dem Fall genau andersrum sein. Dafür gibt’s den Wert column-reverse. Siehe Chris Coyiers Complete Guide to Flexbox.

So habe ich es auch gemacht. Allerdings wäre mir noch lieber, ich könnte im Hochformat noch die beiden Spalten vertauschen, so dass die Spalte mit dem On/Off Button links steht und die andere rechts.

Und die Container container1 und container2 braucht man auch nicht. flex-wrap: wrap existiert.

Hm, da muss ich mich wohl noch weiter einlesen. Das verstehe ich aktuell nicht. Ohne die beiden Container habe ich es gar nicht hin bekommen.

[Matthias Apsel]

Hallo avm75,

So habe ich es auch gemacht. Allerdings wäre mir noch lieber, ich könnte im Hochformat noch die beiden Spalten vertauschen, so dass die Spalte mit dem On/Off Button links steht und die andere rechts.

order existiert, falls die Reihenfolgen sich deutlich von einander unterscheiden sollen. Anderenfalls reicht ein Ändern von flex-direction: column-reverse; in flex-direction: column;.

Bis demnächst
Matthias

[avm75]

order existiert, falls die Reihenfolgen sich deutlich von einander unterscheiden sollen. Anderenfalls reicht ein Ändern von flex-direction: column-reverse; in flex-direction: column;.

Bis demnächst
Matthias

In meinem Fall bräuchte ich demnach beides. Mit column-reverse sorge ich dafür, dass ich Spalten bekomme und die Schaltflächen in umgedrehter Reihenfolge erscheinen, die umgebenden Div's vertausche ich durch Verwendung von order. Ich glaube, das habe ich verstanden.