Flex-box mit immer 2 Columns
07/22/2018 13:55
Cc_Cc_Cc#1
07/22/2018 15:37
krankheit#2
Ich weiß nicht ob ich es richtig verstanden habe...
Mit Row:
[Only registered and activated users can see links. Click Here To Register...]
Mit Column:
[Only registered and activated users can see links. Click Here To Register...]
Mit Row:
[Only registered and activated users can see links. Click Here To Register...]
Mit Column:
[Only registered and activated users can see links. Click Here To Register...]
07/22/2018 20:55
Cc_Cc_Cc#3
Das Zweite mit Column ist richtig gemeint. Aber du hast 2x Div Box genommen. Bei mir lasse ich ja per While alle anzeigen. Das heißt das muss alles in diesem Code passieren:Quote:
Ich weiß nicht ob ich es richtig verstanden habe...
Mit Row:
[Only registered and activated users can see links. Click Here To Register...]
Mit Column:
[Only registered and activated users can see links. Click Here To Register...]
07/22/2018 22:06
krankheit#4
warum muss es denn Column sein ?
Sonst mach es so
[Only registered and activated users can see links. Click Here To Register...]
Ist ja auch irgendwie komisch ... wenn ich ne row habe und sage ein item hat 50% komm ich noch mit.
Bei ner Column aber? das heißt du musst vorher wissen wie viele items du hast die Anzahl halbieren und dann weißt du erst wie hoch ein item sein muss ? Wie willst du das denn sonst bestimmen ?
Sonst mach es so
[Only registered and activated users can see links. Click Here To Register...]
Ist ja auch irgendwie komisch ... wenn ich ne row habe und sage ein item hat 50% komm ich noch mit.
Bei ner Column aber? das heißt du musst vorher wissen wie viele items du hast die Anzahl halbieren und dann weißt du erst wie hoch ein item sein muss ? Wie willst du das denn sonst bestimmen ?
07/22/2018 22:19
Legithos#5
Huhu,
Ich versteh noch nicht genau was du vor hast ? Was du dir aber abgewöhnen solltest ist em und px gleichzeitig zu verwenden, macht's nur unnötig kompliziert! Auch frage ich mich warum du n border-bottom in deine Box packst, wenn du dem Item eh n normalen border gibst ?
Kannst du vllt deinen PHP-code zum Verständnis auch hinzufügen?
Ich versteh noch nicht genau was du vor hast ? Was du dir aber abgewöhnen solltest ist em und px gleichzeitig zu verwenden, macht's nur unnötig kompliziert! Auch frage ich mich warum du n border-bottom in deine Box packst, wenn du dem Item eh n normalen border gibst ?
Kannst du vllt deinen PHP-code zum Verständnis auch hinzufügen?
07/22/2018 22:26
Cc_Cc_Cc#6
Ich möchte das alle Boxen so angezeigt werden. Immer 2 nebeneinander.Quote:
Ich versteh noch nicht genau was du vor hast ? Was du dir aber abgewöhnen solltest ist em und px gleichzeitig zu verwenden, macht's nur unnötig kompliziert! Auch frage ich mich warum du n border-bottom in deine Box packst, wenn du dem Item eh n normalen border gibst ?
Kannst du vllt deinen PHP-code zum Verständnis auch hinzufügen?
Wie im Bild:
Der PHP-Code ist zu lang aber hier ein kleines Bsp. :
07/23/2018 06:52
Legithos#7
Okay jetzt versteh ich's. Du könntest den Items im CSS ein float left geben und die Breite so anpassen, dass zwei Boxen nebeneinander sind. Im Endeffekt nutzt man Flexbox ja für responsive Design, heißt wenn man die Browsergröße anpasst, verschiebt sich das Design. Um jetzt aber immer zu 100% 2 Items nebeneinander zu haben würde ich dir float: left; empfehlen und eben die fixe Breite und/oder nach jedem zweiten Item ein clear: left; einfügen, um sicher zu gehen, dass nach 2 Items eine "neue Zeile" beginnt.
07/23/2018 10:33
type.#8
So ein schöner Thread; ich glaub, ich lass meinen Senf auch mal noch hier. (:
Ich persönlich würde auch auf den Löungsweg von krankheit zurückgreifen. Ist modern, sauber und flexibel.
Nutzt eben nicht flex-direction: column;, aber ich denke nicht, dass das wirklich zwingend nötig ist – zumindest deiner Zeichnung nach zu urteilen – oder?
Selbst, wenn man jetzt nur für den Desktop entwickelt, weiß man ja nicht, welche größe der Browser am Ende beim Nutzer hat. Von daher ist ein responsiver Ansatz sicherlich nie verkehrt.
Ich denke sowieso, dass viele Frontendler diese „Zuordnung” von Specs viel zu eng sehen. CSS bietet mittlerweile so viele Möglichkeiten, die man in Betracht ziehen muss, dass dieses Schubladendenken ein wenig überholt ist; da lasse ich mich aber gern auf eine Diskussuion ein. ^—^
Ich schmeiß, einfach aus Spaß, einfach mal noch die dritte Variante mit ins Rennen: Wie wäre es denn mit Grid?
Totaler Overkill für diese Anwendung, aaaber es funktioniert… :D
Ich persönlich würde auch auf den Löungsweg von krankheit zurückgreifen. Ist modern, sauber und flexibel.
Nutzt eben nicht flex-direction: column;, aber ich denke nicht, dass das wirklich zwingend nötig ist – zumindest deiner Zeichnung nach zu urteilen – oder?
Quote:
Ein wenig oldschool, aber wenn man sich um ältere Browser kümmern muss eine gute Alternative.Quote:
hmm… Ich weiß allerdings nicht, ob ich dem so zustimmen kann. Prozent-basierte Angaben machen ja im Prinzip nichts anderes, als sich auch dem Viewport anzupassen – also responsive sein.Quote:
Selbst, wenn man jetzt nur für den Desktop entwickelt, weiß man ja nicht, welche größe der Browser am Ende beim Nutzer hat. Von daher ist ein responsiver Ansatz sicherlich nie verkehrt.
Ich denke sowieso, dass viele Frontendler diese „Zuordnung” von Specs viel zu eng sehen. CSS bietet mittlerweile so viele Möglichkeiten, die man in Betracht ziehen muss, dass dieses Schubladendenken ein wenig überholt ist; da lasse ich mich aber gern auf eine Diskussuion ein. ^—^
Ich schmeiß, einfach aus Spaß, einfach mal noch die dritte Variante mit ins Rennen: Wie wäre es denn mit Grid?
Code:
display: grid; grid-template: auto / repeat( 2, 1fr );
07/23/2018 14:53
Legithos#9
Bestimmt ist responsive nie verkehrt, macht's aber schwerer und geht auch oft ohne.Quote:
07/23/2018 15:15
Devsome#10
Klar geht es auch ohne responsivität, aber sowas schadet nur deiner Seite.Quote:
Daher falls man etwas im Web programmiert, bitte immer responsive.
07/23/2018 16:43
type.#11
Das würde ich so nicht behaupten. o:Quote:
Viele der neuen Layoutmethoden kommen ja sehr gut ohne Mediaqueries klar – also ist da nicht wirklich mehr Aufwand nötig.
Grid kommt mit auto-fill/auto-fit und Dingen wie repeat() und minmax(),
Flex mit flex-grow, flex-shrink und flex-basis
Damit kann man schon eine ganze Menge anstellen.
Beispiele:
[Only registered and activated users can see links. Click Here To Register...]
[Only registered and activated users can see links. Click Here To Register...]
07/23/2018 20:12
Legithos#12
Wieso schadet das meiner Seite ? Ich brauch doch zb keine Responsivität, wenn ich ein Adminpanel für mich selbst einrichte. Im Endeffekt benutze ich das nur selbst, da muss es nich responsive sein. Meiner Meinung nach ist es Projektabhängig.Quote:
Daher falls man etwas im Web programmiert, bitte immer responsive.
Nunja, es hat einen Grund warum ein responsive Design teurer als ein "normales" ist!
07/23/2018 20:40
lnqlorlouz#13
Naja responsive sollte im Jahr 2018 eigentlich schon Standard sein. Alles andere kannst du vergessen. Zumal es heutzutage so viele CSS-Frameworks gibt, die das alles schon dabei haben.Quote:
Nunja, es hat einen Grund warum ein responsive Design teurer als ein "normales" ist!
- [Only registered and activated users can see links. Click Here To Register...]
- [Only registered and activated users can see links. Click Here To Register...]
- [Only registered and activated users can see links. Click Here To Register...]
- [Only registered and activated users can see links. Click Here To Register...]
Ein nicht responsives Layout sieht einfach nur noch :wat: aus.
07/24/2018 11:24
type.#14
^ thisQuote:
Wobei ich Legithos in einem Punkt Recht geben muss: Wenn ich etwas nur für mich selbst bastel, dann lasse ich Fallbacks/Polyfills und Responsivität oftmals auch einfach Links liegen – ich weiß ja, welche Umstände ich am Ende habe.
Ja, schon… aber wir leben eben auch in einer Welt, in der man nicht vorhersehen kann, mit welchem Device, User-Agent und mit welcher Darstellung ein User auf der Seite landet, deshalb sollte man antizipieren.Quote:
eew. Frameworks. :wat:Quote: