Как я могу плавать прямо в div inline-flex, не используя float?

Question

Я пытаюсь избежать float (или найти альтернативу), чтобы переместить toolbar div вправо от страницы, сохраняя при этом размер ее содержимого.

Итак, если бы я просто добавил:

  float:right;

Ниже .toolbar Я хотел бы получить то, что выглядит как то, что я хочу, - это, по сути, контейнер, который принимает РАЗМЕР своих элементов (от display:inline-flex), который выровнен по правому краю страницы.

Тем не менее, я не хочу float вправо (это работает, но я слышал, что вам следует избегать этого, и я ищу альтернативу float).

Я попытался использовать margin-left: auto;, но не смог понять это (если я не снял flex:inline-flex, который мне нужен для родительского размера.

Есть мысли?

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

Answer 1

Добавить это:

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

Answer 2

Вы можете использовать свойства flex для выравнивания элементов по горизонтальной или вертикальной оси.

Чтобы включить свойства flex, просто сделайте родительский объект контейнером flex.

Добавьте это к своему коду:

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

Или вы можете сделать это:

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

Подробнее: Понимание justify-content и auto поля