用柔性盒创建cv元素

Question

我想做一个包括我的经历在内的工作。

​

所以我试着做了一个div (包装器)，其中包含了每个单词的span。然后我用nth-child对每个元素进行了尝试，以给出一个样式justify-content: flex-end;。

元素确实结束了，但是下一个元素并没有取代它。所以，如果我尝试flex-end 'verkoopmedewerker‘，它会向右转，但在它的前一个位置出现一个间断，所以'plaats’将在'functie‘和它自己之间有一个缺口。

我怎样才能达到图片所显示的效果？

请看我的演示

​

.baan {
  display: flex;
  flex-flow: column;
  background: red;
  width: 40%;
}

.baan :nth-child(3) {
  align-self: flex-end;
}

<h3>Bijbaan</h3>
<div class="baan">
  <strong>Lidl</strong>
  <span>Functie</span>
  <span class="rechts">Verkoopmedewerker</span>
  <span>Plaats</span>
  <span class="rechts">Almeloplein 73
          2533 AD, Den Haag
          Part-time, 54 uur P. week
          </span>
</div>

​

Answer 1

这是一种可能的柔性盒解决方案：

.baan {
  display: flex;
  flex-flow: row wrap;
  background: red;
  width: 40%;
}

.baan span{
  flex: 1 1 50%; /*change width if you don't want the same width for every "span"*/
}

.baan strong{
  flex: 1 1 100%;
}

.baan .rechts{
  text-align:right;
}

然而，我认为CSS-网格在你的情况下更好，因为它在两个方向工作:行和列。Flexbox只在一个方向上工作很好，如果你想要它像网格一样工作，你必须“破解”这个限制。