<分区>
我想在每一行的末尾显示一个图标。我正在尝试使用 flexbox 解决这个问题，但我不明白 justify-self 是如何工作的。
ul {
list-style-type: none;
}
div {
display:flex;
}
div:first-child {
justify-self: flex-start;
}
div:last-child {
justify-self: flex-end;
}<section>
<ul>
<li>
<div>
<p>I want an icon at the end</p>
<i>ICON</i>
</div>
</li>
<li>
<div>
<p>but I dont know how</p>
<i>ICON</i>
</div>
</li>
</ul>
</section>最佳答案
justify-self属性仅用于Grid，而不用于Flexbox，它使用align-self 属性 用于垂直对齐。
你需要的是 flex-container 上的 justify-content: space-between，它分隔 flex-items 或 children 并在主或水平轴上尽可能将他们分开。
ul {
list-style-type: none;
}
div {
display: flex;
justify-content: space-between;
}<section>
<ul>
<li>
<div>
<p>I want an icon at the end</p>
<i>ICON</i>
</div>
</li>
<li>
<div>
<p>but I dont know how</p>
<i>ICON</i>
</div>
</li>
</ul>
</section>关于html - Flexbox - 在行尾对齐图标( self 证明)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47773776/