Flex Box - 3 колонки - выравнивание сверху

Question

У меня проблемы с выравниванием трех столбцов по нескольким "строкам". Если я использую свойство CSS align-items: flex-end;, я получаю правильные результаты, но элементы выравниваются внизу. Если я попытаюсь align-items: flex-start;, ничего не произойдет.

В скрипке я бы хотел, чтобы красный блок двигался вверх, чтобы он находился прямо под Фиолетовым заголовком.

см. скрипка

Любая помощь будет отличной!

Answer 1

Я думаю, вам нужно немного изменить структуру HTML, если вы хотите выполнить свою задачу. Я предлагаю две версии, чтобы решить эту проблему. Вы можете увидеть это на скрипке.

Скрипка 1 - https://jsfiddle.net/AndrewKovalchuk/c6o4gdmh/

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

.categories > ul {
  margin: 0;
  width: 33.33%;
  box-sizing: border-box;
}

.red {
  background-color: red;
}
.purple {
  background-color: purple;
}

Скрипка 2 - https://jsfiddle.net/AndrewKovalchuk/q6jt2d8h/

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

.categories .category {
  width: 33.33%;
  display: flex;
  flex-direction: column;
}

.category > ul {  
  margin: 0;
  box-sizing: border-box;
}

.red {
  background-color: red;
}
.purple {
  background-color: purple;
}

Answer 2

установить flex-direction: столбец и задать ему фиксированную высоту.

height: 400px;
flex-direction: column;

Скрипка - https://jsfiddle.net/0eqLf321/40/