Flex-box mit immer 2 Columns

[Cc_Cc_Cc]

Hi,

ich wollte per While-Schleife User anzeigen lassen.

Ich wollte immer 2 User anzeigen in einer Box. (Two-Columns).

Das Problem ist:

 Spoiler

HTML:

 Spoiler

<div class="box">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
</div>

CSS:

 Spoiler

.box {
	display: flex;
        display: -webkit-flex;
        display: -ms-flexbox;
        width: 100%;
	border-bottom:1px solid #e5e5e5;
	margin-right:0.5em;
	flex-direction:column;
	justify-content:flex-start;
	flex-wrap:wrap;
	margin:0 auto;
	text-align:center;
}

.item {
	width:50%;
	border:1px solid blue;
	align-items:stretch;
}

[krankheit]

Ich weiß nicht ob ich es richtig verstanden habe...
Mit Row:

Mit Column:

[Cc_Cc_Cc]

Originally Posted by krankheit

Ich weiß nicht ob ich es richtig verstanden habe...
Mit Row:

Mit Column:

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:

 Spoiler

<div class="box">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
   <div class="item">5</div>
   <div class="item">6</div>
</div>

[krankheit]

warum muss es denn Column sein ?
Sonst mach es so

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 ?

[Legithos]

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?

[Cc_Cc_Cc]

Originally Posted by Legithos

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 möchte das alle Boxen so angezeigt werden. Immer 2 nebeneinander.

Wie im Bild:

 Spoiler

Der PHP-Code ist zu lang aber hier ein kleines Bsp. :

 Spoiler

PHP Code:

<?php
$stmt = $pdo->prepare("SELECT * FROM `user` LIMIT 10;");

$stmt->execute();

?>
<div class="box">
<?php

while($row = $stmt->fetch(PDO::FETCH_ASSOC)) :

?>

<div class="item">
    User..
</div>

<?php

endwhile;
?>
</div>

[Legithos]

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.

[type.]

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?

Originally Posted by krankheit

Originally Posted by Legithos

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.

Ein wenig oldschool, aber wenn man sich um ältere Browser kümmern muss eine gute Alternative.

Originally Posted by Legithos

Im Endeffekt nutzt man Flexbox ja für responsive Design, heißt wenn man die Browsergröße anpasst, verschiebt sich das Design.

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.
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?

display: grid;
grid-template: auto / repeat( 2, 1fr );

Totaler Overkill für diese Anwendung, aaaber es funktioniert… :D

[Legithos]

Originally Posted by type.

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.

Bestimmt ist responsive nie verkehrt, macht's aber schwerer und geht auch oft ohne.

[Devsome]

Originally Posted by Legithos

Bestimmt ist responsive nie verkehrt, macht's aber schwerer und geht auch oft ohne.

Klar geht es auch ohne responsivität, aber sowas schadet nur deiner Seite.
Daher falls man etwas im Web programmiert, bitte immer responsive.

[type.]

Originally Posted by Legithos

Bestimmt ist responsive nie verkehrt, macht's aber schwerer und geht auch oft ohne.

Das würde ich so nicht behaupten. o:
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:

[Legithos]

Originally Posted by Devsome

Klar geht es auch ohne responsivität, aber sowas schadet nur deiner Seite.
Daher falls man etwas im Web programmiert, bitte immer responsive.

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.


Nunja, es hat einen Grund warum ein responsive Design teurer als ein "normales" ist!

[lnqlorlouz]

Originally Posted by Legithos

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.
Nunja, es hat einen Grund warum ein responsive Design teurer als ein "normales" ist!

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.
-
-
-
-

Ein nicht responsives Layout sieht einfach nur noch aus.

[type.]

Originally Posted by lnqlorlouz

Naja responsive sollte im Jahr 2018 eigentlich schon Standard sein.

^ this
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.

Originally Posted by Legithos

Nunja, es hat einen Grund warum ein responsive Design teurer als ein "normales" ist!

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.

Originally Posted by lnqlorlouz

Zumal es heutzutage so viele CSS-Frameworks gibt, die das alles schon dabei haben.

eew. Frameworks.