How to move button on right using flex model?

Question

I want to move button at the end of right . Here is my code 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>

Use `margin-left: auto` to your `button` parent. – Benjamin Jun 28 '19 at 09:41 — Benjamin, Jun 28 '19 at 09:41

Sai Manoj · Answer 1 · 2019-06-28T08:35:42.560

you can set parent as display:flex;flex-direction: row and make h1 as 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>

Solution 2: You can insert a span element in between the div which you want to align right by applying 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>

I think he want's even the h1 on the right. maybe align-content:flex-end can help? — Sfili_81, Jun 28 '19 at 08:30
As per his question I understand that he wants button to be aligned right — Sai Manoj, Jun 28 '19 at 08:31
Yeah i read better, and it's right he want the button, sorry :) your answer is good and i upvoted it ;) — Sfili_81, Jun 28 '19 at 08:32

How to move button on right using flex model?

1 Answers1