Html Flexbox多功能组件

我需要显示一份包含多组选项的调查问卷。当只有两个选项时，它们应显示在两列中，每列的宽度为50%。当有两个以上时，它们应显示在三列中，每列的百分比为33.3333%。目前，我有一个困难，使列的50%宽度时，只有两个

HTML:

---

假设它们应该在超过3个项目时进行包装，下面是一个非常酷的技巧，使用第n个子选择器，并根据项目的数量确定目标

它们的宽度设置为默认值33.333%，然后当只有2个项目时，.answers.answers.answer:first child:nth-last-child2起作用，使其为50%

* { 框大小：边框框； } .答案{ 边框：2件纯黑； 边缘底部：20px； 显示器：flex； 柔性包装：包装； 证明内容：中心； } 。答案：第一种{ 背景：ccc； } .回答，回答{ 背景：深红色； 利润率：20px0； 边框：1px纯蓝色； 弹性基准：33.333%；/*默认宽度为33%*/ } 答案：第一个孩子：第n个最后一个孩子， .答案.答案：第一个孩子：第n个最后一个孩子2~.答案{/*2项*/ 弹性基准：50%； } 第一个答案 第二个答案 第一个答案 第二个答案 第三个答案 四个答案

---

您是否尝试将.answers.answer规则更改为flex:1；？弯曲：1+最小宽度可以吗？对最后的行为不太确定，第四个呢？很有趣。。。我不知道上一个孩子的事

<div class="answers">
  <div class="answer">first answer</div>
  <div class="answer">second answer</div>
</div>
<div class="answers">
  <div class="answer">first answer</div>
  <div class="answer">second answer</div>
  <div class="answer">third answer</div>
  <div class="answer">four answer</div>
</div>

* {
  box-sizing: border-box;
}

.answers {
  border: 2px solid black;
  margin-bottom: 20px;

   @media (min-width: 480px) {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
  }

  &:first-of-type {
    background: #ccc;
  }

  .answer {
    width: 100%;
    background: crimson;
    margin: 20px 0;
    border: 1px solid blue;

    @media (min-width: 480px) {
      flex: 0 0 33.3333%;
    }
  }
}