Css 使用flexbox创建cv元素

我想做一个包含我的经验的div。

因此，我尝试制作一个div（包装器），其中包含每个单词的

span

。然后我用第n个子元素

n尝试了每个元素，给出了一个样式
justify content:flex end

元素确实走到了尽头，但下一个元素并没有取代它。因此，如果我尝试
flex end
verkoopmedewerker，它会向右移动，但在其前面的位置会出现一个中断，因此“plaats”在“functie”和它本身之间会有一个间隙

我怎样才能达到图中所示的效果



.baan{
显示器：flex；
柔性流动：柱；
背景：红色；
宽度：40%；
}
.班：第n个孩子（3）{
自对准：柔性端；
}
Bijbaan
Lidl
职能
维库普梅德韦克
普拉茨
阿尔梅洛林73
公元2533年，登哈格
兼职，每周54小时
这是一种可能的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网格在您的情况下更好，因为它在两个方向上工作：行和列。Flexbox只在一个方向上工作良好，如果您希望它像网格一样工作，您必须“破解”这个限制