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>