我怎样才能在不使用浮动的情况下正确浮动内联-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>

​

更多细节： margins

Answer 2

添加以下内容：

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