html - 父包装时 Flex 子更改

Question

首先对不起我的英语，

我问我是否可以更改 flex div 中最后一个孩子的样式，当这个孩子进入行（换行）时。

我想要的正是修改最后一个孩子（演示中的 .flexChild）以在空间周围更改 justify-content 或在用户使用移动设备或调整窗口大小时添加填充

（没有媒体查询）

演示在这里

.parent {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  height: 100px;
  background: red;
}

.child {
  padding: 0 20px;
  background: green;
  border: 1px solid black;
}

.flexChild {
  background: yellow;
  display: flex;
  min-width: 200px;
  flex-wrap: wrap;
  flex: 1 1 auto;
  justify-content: space-between;
}

<div class="parent">
  <div class="child">
    Testtestesttest
  </div>
  <div class="child">
    testtesttestt
  </div>
  <div class="child">
    testesttestest
  </div>
  <div class="child flexChild">
    <div class="left">
      <button>1</button>
      <button>2</button>
    </div>
    <div class="right">
      <button>3</button>
    </div>
  </div>
</div>

标签： htmlcssflexbox