使用flexbox创建cv元素

Question

我想制作一个包含我经验的div。

所以我尝试为每个单词创建一个包含span的div（包装器）。然后我尝试使用nth-child的每个元素来提供样式justify-content: flex-end;

元素确实到底，但下一个元素不会取而代之。因此，如果我尝试flex-end'verkoopmedewerker'，它会向右移动，但在之前的位置会出现中断，因此'plaats'将在'functie'与其自身之间留有空隙。

如何实现图片显示的效果？

See my DEMO here

.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

这是一个可能的flexbox解决方案：

.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-grid在你的情况下更好'因为在两个方向上工作：行和列。 Flexbox仅在一个方向上运行良好，如果您希望它像网格一样工作，您就可以“破解”此限制。