使用 flexbox 创建 cv 元素答案

【问题标题】：Creating cv elements with flexbox使用 flexbox 创建 cv 元素
【发布时间】：2018-06-13 16:35:30
【问题描述】：

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

所以我尝试制作一个 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>

【问题讨论】：

标签： css flexbox alignment

【解决方案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 只能在一个方向上很好地工作，如果你想让它像网格一样工作，你必须“破解”这个限制。

【讨论】：