关于radio被挤压，display:flex布局设置flex:none;flex-shrink:0之后，仍然无效的解决办法！全网都是错的，我这篇才是对的！
咱废话不多说，我给您列列！
网上那些错的文章！！全他妈是错的！
【参考01】解决微信小程序的radio被挤压的效果
https://blog.csdn.net/weixin_45579294/article/details/107461799
！！！！！！！！！！！！错！！！！！！！！！！！
【参考02】Flex 布局 元素被挤压的问题
https://blog.csdn.net/Kotoba209_/article/details/104837259
！！！！！！！！！！！！错！！！！！！！！！！！
【参考003】flex-shrink: 0;看起来好像没起作用？请问这是为什么？- SegmentFault 思否
https://segmentfault.com/q/1010000037560636?utm_source=tag-newest
！！！！！！！！！！！！错！！！！！！！！！！！
【参考004】内测版微信6.7.3:一元素设置flex-grow，同级元素会被挤压变形
https://developers.weixin.qq.com/community/develop/doc/000064cff50bc03f23576e50351800?_at=1594455680252
！！！！！！！！！！！！错！！！！！！！！！！！
radio单选框已经变形被挤压
【官方文档】Flex布局的语法！
http://http//www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool
！！！！！！！！！！！！正确！！！！！！！！！！！
然鹅，这只是语法而已，语法肯定是正确的，
但是语法正确你的效果还不是正确的呢！！
不信你就去试试吧，是不是很纳闷，所以，为毛呢？
【正确的】我分3个步骤来和你说
首先步骤一：
我们定义一下html，像下面这样
<view class="view-container">
<radio-group class="radio-group" bindchange="onRadioChange">
<label>第一题：</label>
<label class="radio" wx:for="{{items}}" wx:key="item">
<radio value="{{item.name}}" checked="{{item.checked}}">{{item.value}}</radio>
</label>
</radio-group>
</view>
这个没问题吧？
我负责人的告诉你：你拿去问100个人，100个人都会告诉你，一眼看过去没什么问题！！！！！！对吧？？！
好的，请继续往下看！
其次步骤二：
我们定义下css，像下面这样
.view-container{
margin: 10px auto;
}
.radio-group{
margin-top: 20px;
border-bottom: 1px solid #333;
padding-left: 5%;
padding-bottom: 20px;
padding-right: 5%;
}
.radio{
background-color: yellow;
box-sizing: border-box;
margin-top: 5px;
line-height: normal;
display: flex;
flex: none;
flex-grow: 1;
flex-shrink: 0px; /*防止被压缩*/
flex-direction: row;
align-items: center;
word-break: break-all;
justify-content: flex-start;
}
OK，到了这里，你也百度了一圈，你也看了Flex布局的官方文档
你看到的主要解决办法就是下面三句：
display: flex;
flex: none;
flex-shrink: 0px;
对的，这三句没有任何问题，解决这个被挤压的问题也正是这三句！
然鹅，我告诉你，你就贴上上面两个"完全正确”的html和css，并且你拿这两段html和css去问100个人，他们都会告诉你没毛病
但是你编译一显示，它就是被挤压！！！
被挤压！！被挤压！！被挤压！
你是不是很气？？！！
你是不是被折磨的不行了？？！
你是不是恨不得说：去他妹的flex布局，我改用display:block！
别慌，当一个事情用所有常理都解决不了的时候，你就需要反过来走走，用错试错，以毒攻毒。
下面我告诉你问题出在哪里！
最后步骤三：
问题出在下面这一句：
<radio value="{{item.name}}" checked="{{item.checked}}">{{item.value}}</radio>
正确的写法是：
<radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
就是这个问题！！
我就是把微信小程序的<radio>当成<select>标签来用了
这个<radio>标签就是<input type="radio"/>的做法！！
OK，问题搞定！！
radio单选框已经修复变形不会被挤压了
@越秀金融大厦21楼
@2021.11.08 星期一
