请教如下图箭头所指一个控件居左，一个控件居右，怎么用flex布局呢

Question

Answer 1

html

<div class="container">
    <div>数量:</div>
    <div>按钮组</div>
</div>

css

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

Answer 2

<div class="wrapper">
  <div class="demo">
    <span>数量:</span>
    <button>右边</button>
  </div>
</div>

.wrapper {
  width: 300px;
  background: lightgray;
}

.demo {
  display: flex;
  flex-flow: row nowrap;
}

.demo > span {
  flex: 1 1 auto;
  display: block;
}

.demo > button {
  flex: 0 0 auto;
}