使用flexbox

Question

我正在尝试实现下图所示的列布局。我需要

• 最大。 3栏
• 最大。列中有11个孩子，然后是第12个孩子开始新栏目
• 每个奇数行上的浅色背景，以及每个偶数行上的深色背景

如果没有足够的孩子来组成新列，其他列应该不填满水平空间，如下所示：

https://jsfiddle.net/qLx7sun1/

.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /*flex-direction: column;
  height: calc(20px * 11);*/
}
.parent div {
  flex: 1 0 31%;
  max-width: 31%;
  background: grey;
  height: 20px;
  margin-bottom: 1rem;
}

这是我到目前为止所拥有的;但是孩子们将父级填充为行而不是列。如果我取消注释flex-direction: column;行，它看起来真的很奇怪。我还没有设法获得交替的行背景。

我可以通过CSS / flexbox实现这一点，还是必须使用Javascript？

Answer 1

首先，您要使用flex-direction: column将孩子放在一列中，然后将height定义为11个孩子的高度，即他们的身高* 11 +他们的下边距。并添加align-content: flex-start以使列保持对齐，而不是在列之间创建额外的空格。

然后设置孩子的width而不是flex-basis因为它是列，定义margin-right以在列之间创建空格，并使用:nth-child(even)或{ {1}}进行条带化。

(odd)

.parent {
	display: flex;
	flex-wrap: wrap;
  flex-direction: column;
  height: calc(20px * 11 + 11rem);
  align-content: flex-start;
}
.parent div {
  width: 31%;
  background: grey;
  height: 20px;
  margin-bottom: 1rem;
  margin-right: 1em;
}

.parent div:nth-child(even) {
  background: black;
  color: white;
}