How can I float right a div of inline-flex without using float?

Question

I am trying to avoid float (or find an alternative) to move the toolbar div to the right of the page while keeping its size the size of its contents.

So, if I simply added:

  float:right;

To the below .toolbar I would have what looks like what I want, which is basically a container that takes up the SIZE of its items (from display:inline-flex) that is aligned to the right of the page.

However, I don't want to float it to the right (It works, but I hear you should avoid it and I am looking for an alternative to float).

I did try using margin-left: auto; but couldn't figure that one out (unless I took off the flex:inline-flex which I need for the parent size.

Any thoughts?

.page {
  padding: 20px;
}

.toolbar {
  background: lightgray;
  border: 1px solid black;
  padding: 5px;
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-end;
}

.item {
  background: azure;
  border: 1px solid black;
  padding: 3px;
  margin: 3px;
}

.switchbox {
  display: inline-block;
}

<div class="page">
  <div class="toolbar">
    <div class="item switchbox">Switchbox Component</div>
    <button class="item button">Submit</button>
  </div>
</div>

Make your parent .page display: flex and justify-content: flex-end — Julian Espinosa, Mar 06 '19 at 19:45

Michael Benjamin · Accepted Answer · 2019-03-06T19:56:40.110

You can use flex properties to align elements along the horizontal or vertical axis.

To enable flex properties, simply make the parent a flex container.

Add this to your code:

.page {
  display: flex;
  justify-content: flex-end;
}

.page {
  display: flex;
  justify-content: flex-end;
  padding: 20px;
}

.toolbar {
  background: lightgray;
  border: 1px solid black;
  padding: 5px;
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-end;
}

.item {
  background: azure;
  border: 1px solid black;
  padding: 3px;
  margin: 3px;
}

.switchbox {
  display: inline-block;
}

<div class="page">
  <div class="toolbar">
    <div class="item switchbox">Switchbox Component</div>
    <button class="item button">Submit</button>
  </div>
</div>

Or you can do this:

.page {
  display: flex;
}

.toolbar {
  margin-left: auto;
}

.page {
  display: flex;
  padding: 20px;
}

.toolbar {
  margin-left: auto;
  background: lightgray;
  border: 1px solid black;
  padding: 5px;
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-end;
}

.item {
  background: azure;
  border: 1px solid black;
  padding: 3px;
  margin: 3px;
}

.switchbox {
  display: inline-block;
}

<div class="page">
  <div class="toolbar">
    <div class="item switchbox">Switchbox Component</div>
    <button class="item button">Submit</button>
  </div>
</div>

More details: Understanding justify-content and auto margins

Excellent. It was the second that I needed (so that the rest of the page remained left justified). Or I could have just wrapped that toolbar in another div and done the first. Thank you for the great snippets. Oh, and the reason the margin-left trick wasn't working was that I didn't have flex on page. Again. Thanks. — Joshua Ball, Mar 06 '19 at 20:07

score 2 · Answer 2 · answered Mar 06 '19 at 19:46

2

Add this:

.page {
    display: flex;
    justify-content: flex-end;
}

answered Mar 06 '19 at 19:46

gikall

559
5
16

How can I float right a div of inline-flex without using float?

2 Answers2