我正在尝试使用 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>
但这行不通,我缺少什么?
最佳答案
您可以使用 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>
关于html - 使用 flex : one left and one right 将两个元素对齐在同一行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49307468/