Skocz do zawartości

[css] flex, okreslona liczba elementow w row?


HERO
 Udostępnij

Rekomendowane odpowiedzi

Hej mam taki kod

 

<div style="display: flex; flex-wrap: wrap; gap: 10px;">
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
    <div><img src=""></div>
</div>

 

jak nadaje szerokosc dla diva ktory zawiera obrazek - 32% to uzyskuje taki efekt

 

img img img 

img img img 

 

czy jest w css opcja zeby przy zachowaniu skladni kodu html jak wyzej okreslic ze pierwszym wierszu maja byc trzy obrazki i w drugim wierszu maja byc trzy obrazki?

 

 

 

sory temat do skasowania bo znalazlem rozwiazanie

 flex: 1 0 30%; 

 

Usługi prawne we wszystkich istotnych dziedzinach prawa - kancelaria prawna w Krakowie | Dentysta Mokotów który daje powody do uśmiechu.

 

Odnośnik do komentarza
Udostępnij na innych stronach

Nie męcz się. Użyj grida. Jeśli masz coś w rodzaju tabeli to grid idealnie się do tego nadaje.

 

display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1rem;

 

Jeśli chcesz mieć różną ilość kolumn w zależności od rozdzielczości to ustawisz sobie w media-query.

  • Like 2
  • Thanks 1

Artscape - tworzenie stron www | Pomóż Szajce Szarego Wilka: https://pomagam.pl/szajkowepsiaki

Odnośnik do komentarza
Udostępnij na innych stronach

Jeśli chcesz dodać odpowiedź, zaloguj się lub zarejestruj nowe konto

Jedynie zarejestrowani użytkownicy mogą komentować zawartość tej strony.

Zarejestruj nowe konto

Załóż nowe konto. To bardzo proste!

Zarejestruj się

Zaloguj się

Posiadasz już konto? Zaloguj się poniżej.

Zaloguj się
 Udostępnij

  • Ostatnio przeglądający   0 użytkowników

    • Brak zarejestrowanych użytkowników przeglądających tę stronę.
×
×
  • Dodaj nową pozycję...

Powiadomienie o plikach cookie

Umieściliśmy na Twoim urządzeniu pliki cookie, aby pomóc Ci usprawnić przeglądanie strony. Możesz dostosować ustawienia plików cookie, w przeciwnym wypadku zakładamy, że wyrażasz na to zgodę. Warunki użytkowania Polityka prywatności