使用 flex 在同一行上对齐两个元素:一个左对齐，一个右对齐

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

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

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

Answer 2

align-content 属性以及 align-items 和 align-self 沿 flex 容器的十字轴放置 flex 项目。

使用 flex-direction: row(CSS 中的默认设置(，十字轴是垂直的。因此，在代码中，您尝试将项固定到顶部和底部，而不是左侧和右侧。(请注意，React Native 中的flex-direction默认值是 column 。

对于主轴对齐，请使用 justify-content 属性。

更多细节在这里：

• 在 CSS Flexbox 中，为什么没有"justify-items"和"justify-self"属性？

Answer 3

使用浮点对齐按钮。

.HTML

<div class="footer">
     <button class="back">Back</button>
     <button class="continue">Continue</button>
</div>

.CSS

.back {
   float: left;
}
.continue {
   float: right;
}