[maciorqa]

Hej, mam jedno pytanie z Flexboxa. Robię stronkę, na której mam w sekcji 4 divy. Flex-direction w sekcji jest ustawione na row i flex-wrap jest ustawiony na wrap.
Chcę zrobić coś takiego, że po zmniejszaniu okna przeglądarki do nowej linii przechodzą od razu dwa divy, a nie tylko jeden.

Na tę chwilę wygląda to tak, że jak strona jest na pełnej rozdzielczości, to mam 4 divy w jednym, tym samym wierszu, jednak jak zmniejszę stronę, to TYLKO ostatni div przechodzi do nowej linii, a w pierwszej linii nadal są 3 divy. Dopiero potem muszę jeszcze bardziej zmniejszyć stronę, aby 3 div przeszedł do nowej linii i żeby w pierwszej linii były dwa divy i w ostatniej. A ja chciałbym, żeby od razu po pierwszym zmniejszeniu w pierwszej linii były dwa divy i w drugiej dwa (nie wiem czy dobrze to wszystko wytłumaczyłem).

Na tę chwilę do głowy przychodzą mi tylko dwa rozwiązania:

1. Mogę wrzucić po 2 divy z tych 4 do dwóch, "większych" divów. Wtedy przy zmniejszaniu większy div przejdzie do nowej linii i tym samym te dwa divy, co są w nim.

2. Drugie rozwiązanie to wykorzystanie media queries, czyli przy jakiejś konkretnej rozdzielczości zrobić np większe paddingi po bokach i wtedy do nowej linii powinny przejść od razu dwa divy.

Tutaj łapcie jeszcze przykład na JSFiddle

https://jsfiddle.net/y31zxhLc/

Jak zmniejszycie okno przeglądarki, to zobaczycie, że tylko jeden div przechodzi do nowej linii, a chciałbym, żeby od razu przechodziły dwa. Z tym że chciałbym to zrobić możliwie jak najlepszym sposobem, żeby uczyć się od razu dobrych technik w front endzie, więc mam nadzieję, że mi coś doradzicie.

I ma to być zrobione tylko z wykorzystaniem flexboxa, nie chcę żadnych frameworków czy Grida. Może być od biedy jeszcze właściwość position, ale wątpię, żeby to coś dało. xd

#webdev #frontend #html #css #flexbox #naukaprogramowania i #javascript dla zasięgu, bo to też frontend

[maciorqa]

Wołam @TheBestThing i @asdfghjkl bo ostatnio mi pomogliście i może coś doradzicie. ( ͡° ͜ʖ ͡°)

[patrolez]

@maciorqa: głosuję na opcję 1.

[rationalistic]

@maciorqa: 1szy pomysl jest spoko. Dochodzą dwa nieznaczące divy, ale mimo wszystko ok

[TeflonDon]

@maciorqa: opcja nr 2. Przy mniejszej rozdzialce daj divy na 50% szerokości i elo