Как сделать flex-контейнер в котором 3 элемента будут сверху, а 3 остальных снизу?

Question

[Данил Полянский]

Код: https://codepen.io/danilpolyanskiy/pen/poJLJNE

Comments

[Антон Бобров]

Я бы на гридах сделал https://codepen.io/anton-bobrov/pen/jOPzPLr

Answer 1

[Sadko_MVS]

Как вариант можно сделать так:

.test {
  display: flex;
  flex-wrap:wrap;
justify-content: space-between;
}

.test div {
  width: 250px;
  height: 250px;
margin:10px 5%;
  
  background: #222222;
}

Answer 2

[Дмитрий]

.test {
display: flex;
flex-wrap: wrap;
}

.test div {
flex: 0 0 25%;
max-width: 25%;
width: 250px;
height: 250px;
margin: 10px;
background: #222222;
}

Или так:
.test {
display: flex;
width: 800px;
flex-wrap: wrap;
}

.test div {
width: 250px;
height: 250px;
margin: 5px;
background: #222222;
}