使用生成的内容对齐弹性项目之间的内容答案

【问题标题】：Align content between flex items using generated content使用生成的内容对齐弹性项目之间的内容
【发布时间】：2018-03-07 01:32:26
【问题描述】：

我有一些装饰性内容，我想在弹性项目之间对齐，这些项目之间用空格对齐。

项目具有动态宽度。

以下演示中的结果是我正在寻找的结果，除了因为内容纯粹是装饰性的 - 我想为他们使用生成的内容而不是实际元素。

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  list-style: none;
  padding: 0;
}
li:nth-child(odd) {
  background-color: lime;
  padding: 10px 20px
}
li:nth-child(even) {
  margin: 0 auto;
}

<ul class="wpr">
  <li>this is item 1</li>
  <li>X</li>
  <li>item 2</li>
  <li>X</li>
  <li>item 3 is considerably wider</li>
  <li>X</li>
  <li>item 4</li>
</ul>

Codepen demo（调整大小看效果）

我试图通过使用绝对定位来做到这一点 - 但我不知道是否有一种机制可以以这种方式将项目之间的内容居中：

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  list-style: none;
  padding: 0;
}
li {
  background-color: lime;
  padding: 10px 20px;
  position: relative;
}
li:after {
  content: 'X';
  position: absolute;
  right: -50%; /* this obviously won't produce the correct centering */
}

<ul class="wpr">
  <li>this is item 1</li>
  <li>item 2</li>
  <li>item 3 is considerably wider</li>
  <li>item 4</li>
</ul>

是否可以通过 CSS 使用生成的内容而不是实际元素来添加此内容？

【问题讨论】：

我不确定你在问什么，演示是否描述了你试图实现的行为？如果是，那么问题是什么，如果不是，应该有什么不同？
你想用 CSS 生成 X 吗？
@MichaelB 在演示中 - 我在 X 的标记中使用了实际元素 - 我想为此使用生成的内容
@TemaniAfif 是的，我希望它在项目之间水平居中
有趣，我想您希望它们成为任何类型的元素？也许是一个图标或图像？

标签： html css flexbox

【解决方案1】：

这是一个有小缺点的想法，因为我不得不省略最后一个li 中的项目：

ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  list-style: none;
  padding: 0;
}

li {
  display: flex;
  align-items:center;
  flex:1;
}

li span {
  background-color: lime;
  padding: 10px 20px;
  white-space:nowrap;
}

li:after {
  content: "X";
  flex: 1;
  text-align:center;
}
li:last-child {
 flex:initial;
}
li:last-child::after {
 content:none;
}

<ul class="wpr">
  <li><span>this is item 1</span></li>
  <li><span>item 2</span></li>
  <li><span>item 3 is considerably wider</span></li>
  <li><span>item 4</span></li>
</ul>

【讨论】：

会考虑如何修复最后一项
我真的很喜欢这个主意。关于最后一项，我不需要任何生成的内容，所以这个答案似乎很完美，谢谢！
@Danield good :) 但如果我找到关于如何修复最后一项的想法，我会通知你 ;)

【解决方案2】：

您可以使用绝对定位干净高效地完成它：

ul {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
}

li {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 10px 20px;
  border: 1px dashed red;
  position: relative;
}

li + li::before {                /* #1 */
  content: "X";
  position: absolute;
  right: 100%;
  transform: translateX(50%);   /* #2 */
}

<ul class="wpr">
  <li>this is item 1</li>
  <li>item 2</li>
  <li>item 3 is considerably wider</li>
  <li>item 4</li>
</ul>

revised codepen

注意事项：

adjacent sibling combinator (+) 以紧跟另一个元素的元素为目标。在这种情况下，伪元素将仅适用于在另一个 li 之后的 li 元素。这自然会从第一个li 中排除::before。
有关此居中方法如何工作的说明，请参阅此帖子：Element will not stay centered, especially when re-sizing screen

【讨论】：

+1 - 我喜欢你的回答不需要添加额外的标记，但是结果与我想要的不完全一样 - 项目之间有空格。
我删除了justify-content，因为它什么也没做。它也没有在您接受的答案中做任何事情。一旦你在一个弹性项目上设置了flex-grow（就像你对flex: 1所做的那样），它会占用行上的所有空间。因此，justify-content 被渲染为无用，因为它没有可用空间来对齐。
另外，你甚至不需要justify-content: space-between。您可以在项目上使用flex: 1 实现相同的效果，然后在每个项目中对齐内容。在此处查看我的答案以获取示例stackoverflow.com/q/32378953/3597276

【解决方案3】：

我可以建议的一个改进是替换

li:after {
  content: "X";
  flex: 1;
  text-align:center;
}
li:last-child {
 flex:initial;
}
li:last-child::after {
 content:none;
}

与

li:not(:last-child)::after {
      content: "X";
      flex: 1;
      text-align:center;
    }

【讨论】：