Jak ustawić Flexbox, aby po trzecim elemencie przeskakiwał do nowego wiersza?

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 - Jak złamać wiersz w liście punktowanej w CSS? ?

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