如何在不使用float的情况下向右浮动inline-flex的div？

Question

我正在尝试 避免浮动 （或寻找替代方法）以将toolbar div移动到页面右侧，同时保持其大小为其内容。

因此，如果我只是添加：

  float:right;

对于下面的.toolbar，我将拥有所需的内容，它基本上是一个容器，占据了其项的大小（来自display:inline-flex），该大小与该项的右侧对齐页面。

但是，我不想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

您可以使用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>

更多详细信息：Understanding justify-content and auto margins

Answer 2

添加此内容：

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