使用 flex 在同一行上对齐两个元素：一左一右答案

【问题标题】：Align two elements on the same line using flex: one left and one right使用 flex 在同一行上对齐两个元素：一左一右
【发布时间】：2018-08-24 17:41:35
【问题描述】：

我正在尝试使用 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>

但这不起作用，我错过了什么？

【问题讨论】：

将footer div设为页面全宽（宽度：100%），然后将每个按钮的CSS样式设置为float:left和float:right

标签： html reactjs css flexbox

【解决方案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>

【讨论】：

即使使用 React 导入，我也无法让 className 工作，所以我只是将其更改为普通的 HTML 和 CSS

【解决方案2】：

align-content 属性，以及 align-items 和 align-self，沿着弹性容器的交叉轴定位弹性项目。

使用flex-direction: row（CSS 中的默认设置），横轴是垂直的。因此，在您的代码中，您试图将项目固定在顶部和底部，而不是左右。（请注意，React Native 中的 flex-direction 默认为 column。）

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

更多细节在这里：

In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?

【讨论】：

【解决方案3】：

使用浮动对齐按钮。

HTML

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

CSS

.back {
   float: left;
}

.continue {
   float: right;
}

【讨论】：

问题是关于使用 flex 解决给定的情况。但是，在您的示例中使用 css 浮动属性会使容器 (.footer) 折叠。你可以使用 clearfix 技术来解决这个问题，但在我看来，flex 非常清晰，不会在这种情况下产生不良的副作用。
对，flex 属性也是一个很好的做法，flex 保持灵活的布局和响应性。