nicht angemeldet
Flexbox geziehlt umbrechen lassen möglich?
0 0 0 
Auge
-1
0 Tabellenkalk
0 
Gunnar Bittersmann
Flexbox geziehlt umbrechen lassen möglich?
Hallo,
ich arbeite mich gerade immer mehr in Flexbox ein und möchte eine Seite ganz gern mit Flexbox umsetzen. Ich habe versucht das entsprechend zu lösen, habe aber bisher keine Lösung gefunden. Folgendes soll sein:
Die Seite soll diverse Inhaltsboxen haben, die in zwei Spalten angezeigt werden (mit Navi drei). Die Hauptinhalte sollen innerhalb einer Spalte sein und zwei Boxen rechts davon, im mobilen soll eine Box komplett verschwinden, und die zweite unter der aller ersten rücken, ich dachte, dass hierfür Flexbox prädestiniert sei.
Ein Bild nochmal zur Verdeutlichung:
B rutscht mobil unter A und D verschwindet komplett.
Zunächst die generelle Frage: Ist das mit Flexbox möglich oder nicht? Ich hab es versucht über den wrap zu steuern, aber hier nichts erhalten, auch flex-grow hat nicht wirklich was geholfen, die Elemente wurden nicht wirklich gewünscht umgebrochen.
Könnt ihr so schon was genaues mit meiner Anfrage anfangen, oder braucht ihr noch den Code? Eventell wäre auch schon ein kleiner Gedankenstubser hilfreich, wo ich hierbei genau ansetzen muss, ich will ja hier keinen fertigen Code haben ;-)
Viele Grüße und einen schönen Abend
Markus
-
Hallo,
ohne ein paar Verrenkungen wird es nicht funktionieren.
Ja, wir benötigen den Quellcode, am besten ein Link zu der Seite.
Und auch Informationen, in wie weit du den Quellcode anpassen kannst. Zum Beispiel zusätzliche (Hilfs)Container einfügen kannst.
Oder auch wie hoch die Container sind. Also: Sind alle immer gleich hoch? Wenn nein - welche sind höher?
Gruss
MrMurphy
-
Hallo,
ohne ein paar Verrenkungen wird es nicht funktionieren.
vermutlich wäre es dann sogar einfacher, die Elemente "raus"floaten zu lassen?
Ja, wir benötigen den Quellcode, am besten ein Link zu der Seite.
Den Link gibt es momentan noch nicht, da das nur bei mir lokal zum testen liegt, ob es generell so geht, wie ich mir das denke:
<div id="container-main"> <div class="container-flex a"> <p> Blindtext </p> </div> ... </div>#container-main { display: flex; flex-flow: column wrap; } .container-flex { background-color: #CBCBCB; padding: 5px; margin: 5px; flex: 1 1 50%; }Und auch Informationen, in wie weit du den Quellcode anpassen kannst. Zum Beispiel zusätzliche (Hilfs)Container einfügen kannst.
Da bin ich relativ offen und habe da keine Beschränkungen.
Oder auch wie hoch die Container sind. Also: Sind alle immer gleich hoch? Wenn nein - welche sind höher?
Wahrscheinlich wird der erste Container rechts höher sein, wie der erste links, ansonsten variieren die natürlich auch je nach Inhalten.
Viele Grüße Markus
-
Hallo
Ja, wir benötigen den Quellcode, am besten ein Link zu der Seite.
Den Link gibt es momentan noch nicht, da das nur bei mir lokal zum testen liegt, …
Wenn du deine unfertige Seite noch nicht veröffentlichen willst, nutze bitte einen der hier aufgeführten und für HTML und CSS geeigneten Dienste, um ein auf das Wesentliche reduziertes Beispiel bereitzustellen.
Tschö, Auge
--
Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
Terry Pratchett, „Gevatter Tod“ -
Hallo
dann könntest du das zum Beispiel folgendermaßen lösen:
<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <title>Flexbox Problem 01</title> <meta name="description" content="HTML5, CSS3"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!--[if lt IE 9]> <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script> <![endif]--> <style> @media all { header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; } * { box-sizing: border-box; } html { font-family: Sans-Serif; font-size: 120%; /*für die Einheit rem, mit der ich gerne arbeite*/ } body { margin: 0; } main > * { padding: 1rem; border: 1px solid silver; margin: 1rem; } } /*Flexbox Einstellungen*/ @media all { main { display: flex; flex-wrap: wrap; } main > * { flex: 0 1 auto; width: calc(50% - 2rem); } main > :nth-child(1n+5) { flex: 0 1 auto; width: calc(50% - 1.99rem); } } @media only screen and (max-width: 850px) { main > :nth-child(1n+1) { flex: 0 1 auto; width: calc(100% - 2rem); } main > :nth-child(4) { display: none; } } </style> </head> <body> <main> <article> <h2>A Gummibärchen</h2> <p>Freilebende Gummibärchen gibt es nicht. Man kauft sie in Packungen an der Kinokasse. Dieser Kauf ist der Beginn einer fast erotischen und sehr ambivalenten Beziehung Gummibärchen-Mensch. Zuerst genießt man. Dieser Genuß umfaßt alle Sinne. Man wühlt in den Gummibärchen, man fühlt sie. Gummibärchen haben eine Konsistenz wie weichgekochter Radiergummi.</p> </article> <article> <h2>B Lesbarkeit</h2> <p>Lieber Kunde und Leser, falls Sie keine Probleme haben, diesen Blindtext schnell und zügig zu lesen, können Sie sich glücklich schätzen. Der verantwortliche Art Director, der Ihnen höchstwahrscheinlich gerade diesen Entwurf präsentiert, versteht sein typografisches Handwerk par excellence. Er hat diesen Copyblock weder gestaucht, gezerrt, noch in Versalien oder gar in 6 Punkt Eurostile Outline gesetzt. Er hat ihn ganz einfach lesbar gemacht. Offenbar sogar ziemlich gut, sonst hätten Sie wohl schon einige Zeilen zuvor die Leselust verloren.</p> </article> <article> <h2>C Wenn ich gross bin</h2> <p>Ich bin nur ein kleiner Blindtext. Wenn ich gross bin, will ich Ulysses von James Joyce werden. Aber jetzt lohnt es sich noch nicht, mich weiterzulesen. Denn vorerst bin ich nur ein kleiner Blindtext.</p> </article> <article> <h2>D Millionär Michel</h2> <p>In Deutschland gibt es rund 120.000 Vermögensmillionäre. Sie gelten als die Reichen im Lande. Damit sind ihnen zwei Dinge ganz sicher: Neid und immer neue Begehrlichkeiten des Fiskus. Wer da glaubt, von einer Million als Bonvivant gut leben zu können, der kennt das deutsche Steuerrecht schlecht. Stellen wir uns den steuerehrlichen Herrn Michel vor, der eine Million erarbeitet oder geerbt hat. Vielleicht ist er ein Winzer, der sich zur Ruhe gesetzt und die Weinberge verkauft hat, vielleicht ist er auch ein in die Jahre gekommener Handwerker oder Zahnarzt.</p> </article> <article> <h2>E Bey Gustav</h2> <p>Kaum standen am folgenden Tage die hohen Felsengipfel im Glanz des Sonnenlichts, so hüpfte Gustav aus dem Bette und fand - wem kommt dabey nicht das ehemahls selbst genossene kindische Entzücken beym Anblick des Weihnachtsgeschenks ins Gedächtniss? - einen netten Anzug auf dem Stuhle am Bette, den die Gattinn des Schultheissen von den Söhnen eines im Flecken wohnenden Edelmannes, einstweilen angenommen hatte, da sich nicht so schnell, als sie es jetzt wünschte, die Nähnadeln zu Buchenthal in Bewegung setzen liessen. Ewalds hatten ein Weilchen auf das Benehmen des kleinen Lieblings gelauscht, und öffneten das Gemach, als sich eben seine Empfindungen in ein lautes »Ach wie schön!« auflösten. »Guten Tag, Papa, guten Tag, Mama!« schluchzte Gustav, und eilte den Kommenden entgegen, um mit tausend Händeküssen ihnen Dank und Liebe zu zollen.</p> </article> <article> <h2>F Schuhmacher und Schütze</h2> <p>Ein Holzschuhmacher und ein Bogenschütze mit Brot- beziehungsweise Wassersack durchschritten eine Saccharose-Pfütze.</p> </article> <article> <h2>G Setzerei Appel</h2> <p>Zu meiner Entschuldigung kann ich nur sagen: Ich habe diesen Text nur als Blindtext für die Setzerei Appel in Hamburg geschrieben. Wenn ich gewusst hätte, dass Sie diese Zeilen lesen (man stelle sich das mal vor: Sie persönlich lesen das hier!), dann hätte ich mir natürlich mehr Mühe gegeben. Immerhin bin ich gelernter Texter und seit über 20 Jahren am Üben - da hätte ich wahrlich was Besseres schreiben können als diesen Stuss.</p> </article> </main> </body> </html>Gruss
MrMurphy
-
@@MrMurphy1
Willkommen zu einer neuen Folge Bullshit-Bingo!
<meta name="description" content="HTML5, CSS3">Bullshit.
<script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>Bullshit.
@media all {Bullshit.
header, nav, main, aside, footer, section, article, figure, figcaption, audio, video { display: block; }Bullshit.
font-size: 120%; /*für die Einheit rem, mit der ich gerne arbeite*/Bullshit.
width: calc(50% - 1.99rem);?? 1.99? Was soll das denn?
@media only screen and (max-width: 850px) {Bullshit.
main > :nth-child(4) {Bullshit.
<main><main role="main"><article>Wohl eher
<section>Ich hab wenig Lust, immer wieder dasselbe zu sagen oder immer wieder dieselben Postings aus dem Archiv rauszukramen.
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)
-
-
-
-
Hallo,
mir ist nicht ganz klar, welches Problem du mit flexbox zu lösen versuchst. Für das Verschwinden "im mobilen" solltest du jedenfalls Media-Queries verwenden.
Gruß
Kalk-
Moin,
mir ist nicht ganz klar, welches Problem du mit flexbox zu lösen versuchst. Für das Verschwinden "im mobilen" solltest du jedenfalls Media-Queries verwenden.
Das geht mir nur um die Darstellung, das "verschwinden" mit Media Queries ist mir klar. Mein Problem ist jetzt nur die Steuerung, was in der rechten und was in der linken Spalte angeordnet ist.
Viele Grüße Markus
-
-
@@Sukrams
Ein Bild nochmal zur Verdeutlichung:
So richtig deutlich wird da nichts. Manchmal sagt ein Wort auch mehr als tausend Bilder.
Zum Stylen braucht man erstmal das Markup. Das Markup richtet sich nach dem Inhalt.
A, B, C … lassen nicht erkennen, um was für Inhalte es sich handelt.
B rutscht mobil unter A
Gehört B inhaltlich zu A? Und was soll „mobil“ heißen?
und D verschwindet komplett.
Wenn D völlig unwichtig ist, warum ist es dann bei „nicht mobil“ überhaupt zu sehen?
Wenn D nicht angezeigt werden soll, wäre es bei „mobil“ unsinnig, die Inhalte überhaupt zu laden. Also nur dann (nach)laden, wenn das auch angezeigt wird – per JavaScript?
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)-
Hallo,
So richtig deutlich wird da nichts. Manchmal sagt ein Wort auch mehr als tausend Bilder. Zum Stylen braucht man erstmal das Markup. Das Markup richtet sich nach dem Inhalt. A, B, C … lassen nicht erkennen, um was für Inhalte es sich handelt.
Es sind ganz normale Texte und 1-2 Bilder. Persönlich halte ich es so aber immer, dass ich mir sowas durch Boxen visualisiere, damit ich da dann nur den Blick für das Wesentliche habe, weshalb ich da auch kein Screendesign o.Ä. für habe, da das in meinen Augen auch für mein Problem, bzw. der Fragestellung, ob die Kontrolle des Umbrechens/Wrap via Flexbox so möglich ist.
Gehört B inhaltlich zu A? Und was soll „mobil“ heißen?
Responsive; eine ab einer gewissen viewport-Breite umbrechende Darstellung.
Wenn D völlig unwichtig ist, warum ist es dann bei „nicht mobil“ überhaupt zu sehen? Wenn D nicht angezeigt werden soll, wäre es bei „mobil“ unsinnig, die Inhalte überhaupt zu laden. Also nur dann (nach)laden, wenn das auch angezeigt wird – per JavaScript?
Das hat aber für mich jetzt so nichts mit meiner Fragestellung an sich zu tun...
Viele Grüße Markus
-
@@Sukrams
Zum Stylen braucht man erstmal das Markup. Das Markup richtet sich nach dem Inhalt. A, B, C … lassen nicht erkennen, um was für Inhalte es sich handelt.
Es sind ganz normale Texte und 1-2 Bilder.
Ich dachte, aus meiner Antwort wäre hervorgegangen, dass es weniger um die Art der Inhalte geht als um deren Beziehung zueinander.
Persönlich halte ich es so aber immer, dass ich mir sowas durch Boxen visualisiere, damit ich da dann nur den Blick für das Wesentliche habe,
Das Wesentliche ist der Inhalt, dessen Struktur. Diese sollte sich in der Struktur des Markups widerspiegeln.
Wenn D völlig unwichtig ist, warum ist es dann bei „nicht mobil“ überhaupt zu sehen? Wenn D nicht angezeigt werden soll, wäre es bei „mobil“ unsinnig, die Inhalte überhaupt zu laden. Also nur dann (nach)laden, wenn das auch angezeigt wird – per JavaScript?
Das hat aber für mich jetzt so nichts mit meiner Fragestellung an sich zu tun...
Doch, das hat es. Eine Seite, die massenhaft Inhalte lädt, die gar nicht zur Anzeige kommen, kann man nicht „responsive“ nennen.
LLAP 🖖
--
„Wir haben deinen numidischen Schreiber aufgegriffen, o Syndicus.“
„Hat auf dem Forum herumgelungert …“
(Wachen in Asterix 36: Der Papyrus des Cäsar)
-
-