Question

我想在right的末尾移动按钮。这是我的代码JSbin

    <div style="display: flex;justify-content: center;">
       <h3 style="font-weight: bold;">Back</h3>
        <div style="display: flex">
         <button class="btn btn-primary clearfix" ng-click="onRejectedReason()">Rejected Reason</button>
        </div>
   </div>

Answer 1

您可以将父级设置为display:flex;flex-direction: row，并将h1设置为flex-basis: 100%;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">

</head>

<body>
  <div style=" display: flex;flex-direction: row; align-items: center;">
    <h3 style=" flex-basis: 100%;">Back</h3>

    <button class="btn btn-primary clearfix" ng-click="onRejectedReason()">Rejected Reason</button>

  </div>
</body>

</html>

解决方案2：您可以通过应用span在想要右对齐的div之间插入一个flex: 1 1 auto元素。

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>

<body>
  <div style="display: flex;justify-content:   justify-content: space-between;;">
    <h3 style="font-weight: bold;">Back</h3>
    <span style="flex: 1 1 auto;"></span>
    <div style="display: flex">
      <button class="btn btn-primary clearfix" ng-click="onRejectedReason()">Rejected Reason</button>
    </div>
  </div>
</body>

</html>

如何使用flex模型向右移动按钮？

1 个答案: