html - float :right is limited by its parent div, 使其右对齐/向下对齐

Question

我正在尝试获取一个工具栏 div，其中左侧 div 在屏幕左侧对齐，右侧 div 在屏幕最右侧对齐。

我已经尝试为父分隔线设置固定的分隔线设置，但没有一种方法看起来非常直观。我不能为父 div 使用 100vw，因为左侧有一个工具栏。

.dashboard_secondary_toolbar{
    /* display:inline-block; */
    flex: 1;
}

.dashboard_secondary_toolbar_left{
    float: left;
}

.dashboard_secondary_toolbar_right{
    float: right;
}

<div class = "dashboard_secondary_toolbar">
    <div class = "dashboard_secondary_toolbar_left">
        <p> align me left </p>
    </div>
    <div class = "dashboard_secondary_toolbar_right">
        <p> align me right </p>
    </div>
</div>

Answer 1

只需使用 flex 而不是 float 每个 div

.dashboard_secondary_toolbar {
  display: flex;
  flex: 1;
  justify-content: space-between;
}

<div class="dashboard_secondary_toolbar">
  <div class="dashboard_secondary_toolbar_left">
    <p> align me left </p>
  </div>
  <div class="dashboard_secondary_toolbar_right">
    <p> align me right </p>
  </div>
</div>