CSS布局:左侧一个固定元素, 右侧元素数量不定, 要求右侧元素数量多时直接另起一行, 左侧元素单独一行

背景:
列表项可选中, 选中后顶部出现操作栏, 包括全选框 + 操作按钮

要求当按钮只有两个时, 他们显示在同一行, 全选框左对齐, 操作按钮右对齐

当按钮有多个时, 一行放不下, 要求全选框独占一行, 按钮另起一行左对齐显示

实现:

<div class="container">
    <div class="checkbox"></div>
    
    <div class="button-group"></div>
</div>

<style>
    .container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    
    .checkbox {
        flex: 1;
    }
    
    .button-group {
    }
</style>