设计呀，你是真会给前端找事呀！！！

背景

• 
  
• 设计：我想要的你听明白了吗，你做出来的和我想要的差距很大，你怎么没有一点审美（你个臭男人，你怎么不按我画的做）！
  
• 我：啊？这样自适应不是很好吗，适配了大部分机型呀，而且不会有啥显示的兼容性，避免不必要的客户咨询和客户投诉。
  
• 设计： 你上一家公司就是因为有你这样的优秀员工才倒闭的吧？！
  
• 我：啊？ntm和产品是一家的是吗？
  

我该如何应对

先看我实现的

在看看设计想要的

总结一下：

• 
  
• 1.一个的时候宽度固定，不管屏幕多大都占屏幕的一半。
  
• 2.俩个的时候，各占屏幕的一半，当屏幕过小的时候两个并排展示换行。
  
• 3.三个的时候，上面俩，下面一个，且宽度要一样。
  
• 4.大于三个的时候，以此类推。
  

有句话叫做什么，乍一看很合理，细想一下，这不是扯淡么。

所以我又和设计进行了亲切的对话

• 
  
• 我：两个的时候你能考虑到小屏的问题，那一个和三个的时候你为啥不考虑，难道你脑袋有泡，在想一个和三个的时候泡刚好堵住了？
  
• 设计： 你天天屌不拉几的，我就要这样，这样好看，你懂个毛的设计，你知道什么是美感和人体工学设计，视觉效果拉满吗？
  
• 我：啊？我的姑奶奶耶，你是不是和产品一个学校毕业的，咋就一根筋呢？
  
• 产品：ui说的对，我听ui的。汪汪汪（🐶）
  

当时那个画面就像是，就像是：

而我就像是

那咋办，写呗，我能咋办？

我月黑风夜，
黑衣傍我身，
潜入尔等房，
打你小屁屁？

代码实现

   class={[
'group-even-number' : this.evenNumber,
'group-odd-number' : this.oddNumber,
'themeSelectBtnBg'

      ]}

      value={this.currentValue}

      onInput={(value: any) => {
this.click(value)

      }}

    >

      ...

   .themeSelectBtnBg {
display: flex;

       &:nth-child(2n - 1) {
margin-left: 0;
margin-right: 10px;

       }

       &:nth-child(2n) {
margin-left: 0;
margin-right: 0;

       }


   }
// 奇数的情况，宽度动态计算，将元素挤下去
.group-odd-number {
// 需要减去padding的宽度
width: calc(50% - 7.5px);

   }

.group-even-number {
justify-content: space-between;
@media screen and (max-width:360px) {
justify-content: unset;
margin-right: unset;
flex: 1;
flex-wrap: wrap;

      }

   }

行吧，咱就这样吧