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

Posted 2023-02-22

【中文标题】使用 flex 在同一行上对齐两个元素：一左一右

【英文标题】：Align two elements on the same line using flex: one left and one right

【发布时间】：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

【参考方案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 保持灵活的布局和响应性。