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

Question

我试图避免 float (或寻找替代方法)将toolbar div移动到页面右侧，同时保持其size 其内容的大小。

所以，如果我简单地添加:

  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

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