Jak poprawnie napisać layout w oparciu o Flexbox ?

Question

Witam.

Na obrazku poniżej przedstawiam zaprojektowany przeze mnie układ w photoshopie.

Od wczoraj męczę się z napisaniem tego w CSS za pomocą flexboxa i już po prostu mam dość. 

Kombinowałem na różne sposoby, Albo obrazek nie dopasowuje się wraz z iframe do pozostałej szerokości albo coś jest nie tak z przepływem zdjęć produktów podczas zmiany rozdzielczości ekranu. 

Lub gdy jeden z elementów pójdzie na dół mowa tutaj o (pierścionkach) to wtey zostane po nim i tak zajęte miejsce obok na 200px mimo iż obiektu tam nie ma.

 

Pokazuje poniżej jak chcę zrobić aby to działało. Będzie wtedy najprościej wytłumaczyć co chcę uzyskać.

Comments

Pokaż lepiej, czego wymagasz od każdej z rozdzielczości oraz jakiś dotychczasowy kod, np. w serwisie codepen.io.

---

Proszę. Tak przykładowo dla rozdzielczości 320px - 480px, powiedzmy dla rozdzielczości tabletowej układ zostaje tak jak na pierwszym zrzucie z tym, że przykładowo mapka oraz informacja z dostawą idzie na spód i układa sie jedno obok drugiego.

---

Kodu nie mam praktycznie żadnego. Usunąłem wszystko co miałem, gdyż nie miał on większego sensu. Inne rzeczy potrafię zrobić ale tutaj nie rozumiem zagnieżdżenia flexboxa w elemencie mającym już display: flex;

---

Mówisz o sytuacji, w której masz zagnieżdżonych parę elementów z display: flex;? Ale przecież jest to bardzo intuicyjne, gdyż każdy z flex containerów (rodziców) dyktuje swoje zasady dla dzieci, które się w nim zawierają. Prezentuje to ta sytuacja.

Jeśli chodzi o resztę, to wątpię, aby ktokolwiek pisał ci od zera cały kod. Jeśli potrzebujesz pomocy, to chociaż daj jakieś próby, coś, na czym można pracować.

Na koniec masz tutaj poradnik tłumaczący tajniki flexboxa.

Answer 1

Bez znajomości podstaw RWD się nie obejdzie. Obejrzyj sobie poradniki do flexboxa i media queries

Answer 2

http://flexboxfroggy.com/ - polecam, z tym łatwo i przyjemnie ogarniesz flexboxa :)

Answer 3

Tak na szybko wymyśliłem coś takiego:

https://jsfiddle.net/ve1yx20b/

ale jak ktoś już pisał bez `media queries` się nie obejdzie.

Comments

Kolega wyżej widzę też ma problem z tym co ja. Kontener nie rozciąga się razem z zawartością. Właśnie też doszedłem do tego momentu i napotkałem na ten problem Tam gdzie zostaje niebieski kwadrat to zawartość ładnie przechodzi a on nie dopasowuje się. Jest na to jakiś sposób ? Media queries znam, wiem jak stosować, ale myślałem że flexbox jest na tyle inteligentny, że ten kontener jednak jakoś dopasuje się.

Ogólnie przerabiam wiele płatnych szkoleń dotyczących tworzenia stron internetowych. Jednakże jak bywa w życiu, nie zawsze każdy scenariusz zostanie przerobiony. Co do 24 lekcji z żabką flexboxa, to już dawno to przerabiałem. Wszystko co tam jest było dla mnie w 100% zrozumiałe.