Flexbox 多列

Question

我需要展示一份包含多组选项的问卷。当只有两个选项时，它们应显示在两列中，每列宽度为 50%。当有两个以上时，它们应该显示在三列中，每列有 33.3333%。目前，当只有两个列时，我很难将列宽度设置为 50%。

https://codepen.io/sleepydada/pen/Evjgwr

HTML：

<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>

SCSS：

* {
  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%;
    }
  }
}   

Answer 1

假设它们应该在超过 3 个项目时换行，这是一个非常酷的技巧，使用 nth-child 选择器并根据项目的数量来定位项目。

它们的宽度设置为默认值 33.333%，然后当只有 2 个项目时，.answers .answer:first-child:nth-last-child(2) 会启动并将它们设为 50%

* {
  box-sizing: border-box;
}

.answers {
  border: 2px solid black;
  margin-bottom: 20px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.answers:first-of-type {
  background: #ccc;
}

.answers .answer {
  background: crimson;
  margin: 20px 0;
  border: 1px solid blue;
  flex-basis: 33.333%;                         /*  default width is 33%  */
}

.answers .answer:first-child:nth-last-child(2),
.answers .answer:first-child:nth-last-child(2) ~ .answer {  /*  2 items  */
  flex-basis: 50%;
}

<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>