Flex Box-3列-对齐顶部

Question

我很难将3列与多个“行”对齐。如果使用CSS属性align-items: flex-end;，我会得到正确的结果，但是元素在底部对齐。如果我尝试align-items: flex-start;，什么也没发生。

在小提琴中，我希望红色块向上移动，因此它正好在紫色标题的下面。

请参阅fiddle

任何帮助都会很棒！

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/