使用flex将两个元素对齐在同一条线上:一个左边和一个右边

Question

我正在尝试使用flex来对齐同一行上的按钮:按钮"Back"应位于左侧,按钮"Continue"位于右侧(行的末尾).

.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>