背景

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

我该如何应对

先看我实现的

在看看设计想要的

总结一下：

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

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

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

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

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

而我就像是

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

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

代码实现

<el-radio-group
class={[
'group-even-number' : this.evenNumber,
'group-odd-number' : this.oddNumber,
'themeSelectBtnBg'
]}
value={this.currentValue}
onInput={(value: any) => {
this.click(value)
}}
>
...
</el-radio-group>

.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;
}
}

行吧，咱就这样吧

作者：顾昂_
链接：https://juejin.cn/post/7304268647101939731