使用生成的内容在Flex项目之间对齐内容
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用生成的内容在Flex项目之间对齐内容相关的知识，希望对你有一定的参考价值。
我有一些化妆品内容，我想在柔性物品之间对齐，这些物品与空间之间是合理的。
这些项目具有动态宽度。
以下演示的结果是我正在寻找的，除了因为内容纯粹是装饰性的 - 我想为它们使用生成的内容而不是实际的元素。
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使用生成的内容而不是实际元素添加此内容？
答案
这是一个有一个小缺点的想法，因为我不得不省略最后一个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>另一答案
您可以通过绝对定位干净而有效地完成：
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>另一答案
我可以建议的一个改进就是取代
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;
}
以上是关于使用生成的内容在Flex项目之间对齐内容的主要内容，如果未能解决你的问题，请参考以下文章