Question

我尝试使用flex来对齐同一行上的按钮：按钮＆＃34;返回＆＃34;应该在左侧和按钮＆＃34;继续＆＃34;在右边（行尾）。

＆＃13;

.footer {
    display: flex;
}

.back {
    align-content: flex-start;
}

.continue {
    align-content: flex-end;
}

＆＃13;

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

＆＃13;

但这不起作用，我缺少什么？

Answer 1

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

＆＃13;

.footer {
    display: flex;
    justify-content: space-between;
}

.back {
}

.continue {
}

＆＃13;

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

＆＃13;

Answer 2

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

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

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

此处有更多详情：

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

Answer 3

使用float来对齐按钮。

<强> HTML

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

<强> CSS

.back {
   float: left;
}

.continue {
   float: right;
}

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

3 个答案: