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

Flexbox 5 elementów w wierszu

VPS Starter Arubacloud
0 głosów
171 wizyt
pytanie zadane 29 sierpnia 2017 w HTML i CSS przez jjanek Użytkownik (630 p.)
edycja 29 sierpnia 2017 przez jjanek

Hej, 
czy mogli byście pomoc? 
Potrzebuje ułożyć 5 elementów w wierszu na desktopie 2 na mobilce próbuje wykorzystac flexboxa 
wszystko pieknie działa w momencie gdy mam sredni ekran kiedy mam duży monitor podpiety wyswietla mi 7 elementow obok siebie 

Oraz troche inny przypadek w momencie gdy mam 9 elementow chciał bym je wyswietlic w 3 kolumnach po 3 elementy a w momencie keidy mial bym 8 2 razy po 4. 

Pierwszy raz z flexboxa korzystam i troch enie intuicyjne jest dla mnei.

.flex-container {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-align-content: flex-start;
    -ms-flex-line-pack: start;
    align-content: flex-start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.flex-item {
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-flex: 0 1 auto;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}

 

2 odpowiedzi

0 głosów
odpowiedź 29 sierpnia 2017 przez ForeverFriendzone Dyskutant (7,520 p.)
wybrane 29 sierpnia 2017 przez jjanek
 
Najlepsza
A może prościej byłoby skorzystać w takiej sytuacji z grida CSS?

https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template
komentarz 29 sierpnia 2017 przez jjanek Użytkownik (630 p.)
Hej,
troche przed Twoim komentarzem już rozwiązałem problem własnie za pomocą grida :)
Całkiem przyjemne.

Muszę znaleść jakieś źródła do nauki responsywności zeby nabrac wiedzy jeszcze : 0
0 głosów
odpowiedź 29 sierpnia 2017 przez jaca121212 Nałogowiec (40,760 p.)
Poczytaj o jednostkach em i rem w css

Podobne pytania

0 głosów
2 odpowiedzi 1,952 wizyt
pytanie zadane 14 listopada 2019 w HTML i CSS przez Michał_Warmuz Mądrala (5,830 p.)
0 głosów
1 odpowiedź 720 wizyt
pytanie zadane 16 sierpnia 2019 w HTML i CSS przez Radek Koniarski Użytkownik (870 p.)
+1 głos
2 odpowiedzi 366 wizyt
pytanie zadane 6 stycznia 2021 w HTML i CSS przez AgentTecza Obywatel (1,810 p.)

92,829 zapytań

141,771 odpowiedzi

320,814 komentarzy

62,158 pasjonatów

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.

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...