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>