在Flexbox中对齐项目

Question

Codepen

HTML：

<nav class="parent">
  <a href="#" class="child">first item</a>
  <a href="#" class="child">another item</a>
  <a href="#" class="child">and another</a>
  <a href="#" class="child">last item</a>
</nav>

CSS：

.parent {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.item {
    flex-grow: 1;
    padding-top: 1rem;
    padding-bottom: 1rem;
    text-align: center;
}

问题

第一个孩子不应该留下填充物。 最后一个孩子不应该有正确的填充。

Answer 1

您可以使用以下内容实现此目的，

.parent :first-child {
    text-align: left;
    flex-grow: .5;
}

.parent :last-child {
    text-align: right;
    flex-grow: .5;
}

CODEPEN

希望这有帮助。