Flexbox 5 elementów w wierszu

Question

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;
}

 

Answer 1

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

Comments

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

Answer 2

Poczytaj o jednostkach em i rem w css