html - 使用 flex : one left and one right 将两个元素对齐在同一行

Question

我正在尝试使用 flex 将按钮对齐在同一行上:按钮“后退”应位于左侧，按钮“继续”应位于右侧(行尾)。

.footer {
    display: flex;
}

.back {
    align-content: flex-start;
}

.continue {
    align-content: flex-end;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div className={"footer"}>
     <Button className={"back"}> Back </Button>
     <Button className={"continue"} >Continue</Button>
</div>

但这行不通，我缺少什么？

Answer 1

您可以使用 justify-content: space-between;在 flex 容器上生成所需的布局:

.footer {
    display: flex;
    justify-content: space-between;
}

.back {
}

.continue {
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>


<div class="footer">
     <Button className={"back"}> Back </Button>
     <Button className={"continue"} >Continue</Button>
</div>