margin, float not working in display flex

Question

<div class="header">
  <h2>Records</h2>
  <div class="filter">
    <input type="text">
  </div>
  <button type="button">Filter</button>
</div>

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

https://jsfiddle.net/code_mouse/dqxu61pw/

http://prntscr.com/q51spr

I want to move the filter div element to the right. But margin, float styles don't work. What is the solution to move the central element to the right in display: flex ?

score 3 · Accepted Answer · answered Dec 02 '19 at 13:24

One option is to set margin-left: auto for the filter class

.header {
  display: flex;
  align-items: center;
}

.filter {
  margin-left: auto;
}

<div class="header">
  <h2>Records</h2>
  <div class="filter">
    <input type="text">
  </div>
  <button type="button">Filter</button>
</div>

score 0 · Answer 2 · answered Dec 02 '19 at 13:24

0

Update this HTML

<div class="header">
<div>
<h2>Records</h2>
</div>

  <div class="filter">
    <input type="text">
    <button type="button">Filter</button>
  </div>

</div>

answered Dec 02 '19 at 13:24

Awais

4,752
4
17
40

score 0 · Answer 3 · answered Dec 02 '19 at 13:29

Try This:

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

<div class="header">
  <h2>Records</h2>
  <form class="form-inline">
    <div class="form-group">
      <input type="text">
      <button type="button">Filter</button>
    </div>
  </form>
</div>

margin, float not working in display flex

3 Answers3