Pomoc z flexem

pytanie zadane 16 marca 2018 w HTML i CSS przez pebrzosky Obywatel (1,160 p.)

Hej. Mam taki problem na wszystkich tutorilach które oglądam i uczą flexboxa jest pokazane jak tworzą bardzo proste elementy, które nie mają nic w sobie i najczęściej są to kwadraciki poustawiane obok siebie. Ja jednak i tak mam problem ze stworzeniem czegoś takiego jak na obrazku.

https://www.fotosik.pl/zdjecie/pelne/5eb630d05daa5767

Czarne to tło kontenera i w środku 3 obrazki ustawione obok siebie a pod każdym z nich nagłowek opis i button. Jeśli daje display:flex na te czarne tło to wszystko się ustawia w jednej lini. Nie bardzo potrafię to zrozumieć? Pomoże ktoś? wytłumaczy? Jak się najlepiej zabierać do takich rzeczy? Chciałbym nauczyć się budować elementy takie jak mi się zachce :) obok siebie, pod sobą, nad sobą w sobie HELP

2 odpowiedzi

odpowiedź 16 marca 2018 przez Tomek Sochacki Ekspert (227,510 p.)
wybrane 16 marca 2018 przez pebrzosky

Najlepsza

Tak na szybko bo nie mam zbyt dużo czasu na zabawę na codepen:

https://codepen.io/Tomek_Sochacki/pen/RMGpmM

Kod CSS wymaga na pewno dopracowania, ale to już pozostawiam jako ćwiczenie do nauki :)

Można też bawić się css grid, ale ma to mniejsze wsparcie niż flex i do takiego prostego layoutu myślę, że flex w zupełności wystarczy.

odpowiedź 16 marca 2018 przez PolYGlok Pasjonat (19,450 p.)
edycja 16 marca 2018 przez PolYGlok

Flex jest przede wszystkim potrzebny gdy zależy Ci by kafelki/kwadraty reagoway według rozdzielczości ekranu-to jest lekka odpowiedź na resposywność stron.

jak chcesz mieć kwadracik, opis, i button "pod sobą" to umieś to w jedny divie a wszystko ustaw flex.

to jest troche zależne co chcesz osiągnąć tym fleksem.

komentarz 16 marca 2018 przez PolYGlok Pasjonat (19,450 p.)

ps. ja tak troche opuściłem nauke flex'em i poszedłem w grid który jest bardziej otwary na responsywność chociaż nie zapominam jakie flex ma inne zalety.

komentarz 16 marca 2018 przez pebrzosky Obywatel (1,160 p.)

@PolYGlok, Czyli jak najlepiej nauczyć się tworzenia takiego layotu jakiego chce? Bootstrapem sobie stworzę, ale chciałbym się nauczyć bardziej tradycyjnie, żeby to zrozumieć