Jak ustawić Flexbox, aby po trzecim elemencie przeskakiwał do nowego wiersza, nie podając szerokości elementu?
Czy to nie jest ten sam problem/pytanie co w tym watku - https://4programmers.net/Forum/Webmastering/371657-jak_zlamac_wiersz_w_liscie_punktowanej_w_css?p=1947973#id1947973 ?
"nie podając szerokości elementu"
Jeśli możesz manipulować HTMLem to i nie jest wymagana lista divów to można zrobić parent diva, co 3 np.
<div class="container">
<div class="row">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<div class="row">
<div>4</div>
<div>5</div>
<div>6</div>
</div>
.
.
.
</div>
Ewentualnie css grid
edit: wiem, że nie odpowiadam na temat, ale wygląda na problemy XY
B.Eng napisał(a):
"nie podając szerokości elementu"
@B.Eng: ale ja to rozumiem że chodzi o konkretną szerokość typu 250px
a nie że w ogóle nic. A poza tym - problem jest tak szczątkowo i mało konkretnie opisany, że tylko możemy zgadywać/domyślać się, co autor miał na myśli.
xpeye napisał(a):
Jak ustawić Flexbox, aby po trzecim elemencie przeskakiwał do nowego wiersza, nie podając szerokości elementu?
Jeśli elementy mają mieć równą szerokość, to możesz użyć:
flex-basis: 33%;
Jeśli nie chcesz żeby były równe, to musisz chyba coś wsadzić "pomiędzy" nie, np tak:
<div class="container">
<div>1</div>
<div>2</div>
<div>3</div>
<div class="spacer"></div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>
.spacer {
flex-basis: 100%;
}
Riddle napisał(a):
Też trzeba pamiętać o ustawieniu flex-wrap: wrap
na kontenerze bo bez tego flex-basis: 33%
na elemencie nie zadziała.
Napiszę jakiś inny przykład, bo inne już padły, nie podam flexem ani gridem, bez sensu podawać takie same.
<div>
<a>test</a></br>
<a>test1</a></br>
<a>test2</a></br>
<a>test3</a></br>
<a>test4</a></br>
<a>test5</a></br>
</div>
div {
display: block;
}
div br {
display: none;
}
a:nth-child(3n + 2) + br {
display: block;
}
Zarejestruj się i dołącz do największej społeczności programistów w Polsce.
Otrzymaj wsparcie, dziel się wiedzą i rozwijaj swoje umiejętności z najlepszymi.