• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak poprawnie napisać layout w oparciu o Flexbox ?

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
578 wizyt
pytanie zadane 19 września 2017 w HTML i CSS przez andrzej-cs Początkujący (300 p.)

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

5
komentarz 19 września 2017 przez Patrycjerz Mędrzec (192,320 p.)

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

komentarz 19 września 2017 przez andrzej-cs Początkujący (300 p.)

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.

komentarz 19 września 2017 przez andrzej-cs Początkujący (300 p.)
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;
2
komentarz 19 września 2017 przez Patrycjerz Mędrzec (192,320 p.)

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.

3 odpowiedzi

0 głosów
odpowiedź 19 września 2017 przez avrack4 Początkujący (370 p.)
Bez znajomości podstaw RWD się nie obejdzie. Obejrzyj sobie poradniki do flexboxa i media queries
0 głosów
odpowiedź 19 września 2017 przez Codeboy Stary wyjadacz (12,120 p.)
http://flexboxfroggy.com/ - polecam, z tym łatwo i przyjemnie ogarniesz flexboxa :)
0 głosów
odpowiedź 19 września 2017 przez skav3n Gaduła (3,900 p.)
Tak na szybko wymyśliłem coś takiego:

https://jsfiddle.net/ve1yx20b/

ale jak ktoś już pisał bez `media queries` się nie obejdzie.
komentarz 20 września 2017 przez andrzej-cs Początkujący (300 p.)
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.

Podobne pytania

+2 głosów
3 odpowiedzi 1,098 wizyt
pytanie zadane 21 czerwca 2021 w HTML i CSS przez Matrix8867 Nowicjusz (170 p.)
0 głosów
0 odpowiedzi 649 wizyt
pytanie zadane 5 lipca 2018 w HTML i CSS przez jakznalezcchlopaka Nowicjusz (120 p.)
0 głosów
4 odpowiedzi 816 wizyt
pytanie zadane 19 lutego 2017 w HTML i CSS przez czujek22 Dyskutant (7,670 p.)

93,191 zapytań

142,206 odpowiedzi

322,042 komentarzy

62,518 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 3053p. - dia-Chann
  2. 2998p. - Łukasz Piwowar
  3. 2993p. - Łukasz Eckert
  4. 2970p. - CC PL
  5. 2930p. - Tomasz Bielak
  6. 2907p. - Łukasz Siedlecki
  7. 2890p. - rucin93
  8. 2584p. - Adrian Wieprzkowicz
  9. 2536p. - Mikbac
  10. 2485p. - Marcin Putra
  11. 2418p. - Michal Drewniak
  12. 2239p. - Michał Telesz
  13. 2156p. - Anonim 3619784
  14. 1733p. - rafalszastok
  15. 1650p. - Mariusz Fornal
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...