<view class="container">
<view class="column-who">
<radio-group class="radio-group-who" data-id="who" bindchange="onRadioChange">
<radio class="radio" wx:for-items="{{whoItems}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}">
<text>{{item.value}}</text>
</radio>
</radio-group>
</view>
<view class="column-what">
<radio-group class="radio-group-what" data-id="what" bindchange="onRadioChange">
<radio class="radio" wx:for-items="{{whatItems}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}">
<text>{{item.value}}</text>
</radio>
</radio-group>
</view>
<view class="column-how">
<radio-group class="radio-group-how" data-id="how" bindchange="onRadioChange">
<radio class="radio" wx:for-items="{{howItems}}" wx:key="name" value="{{item.name}}" checked="{{item.checked}}">
<text>{{item.value}}</text>
</radio>
</radio-group>
</view>
<view class="column-checkbox-group">
<checkbox-group class="checkbox-group" bindchange="onCheckboxChange">
<label>
<checkbox value="勾选" checked="{{isChecked}}">{{'无精胡牌'}}</checkbox>
</label>
</checkbox-group>
</view>
</view>
.container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: center;
height: 70vh; /* 设置父容器高度为视口高度，可以根据需要调整 */
padding-top: 123rpx; /* 如果有设置的话 */
background-color: rgb(255, 255, 255);
}
.column-what {
flex: 1;
display: flex; /* 子元素内部也使用flex布局 */
flex-direction: column; /* 垂直排列内部元素 */
}
.column-how {
flex: 1;
display: flex; /* 子元素内部也使用flex布局 */
flex-direction: column; /* 垂直排列内部元素 */
}
.column-checkbox-group {
flex: 1;
display: flex; /* 子元素内部也使用flex布局 */
flex-direction: column; /* 垂直排列内部元素 */
}
.column-who {
display: flex; /* 子元素内部也使用flex布局 */
flex-direction: column; /* 垂直排列内部元素 */
width: 80px;
}
.radio-group-who {
align-items: center; /* 垂直对齐方式 */
flex: 1; /* 使radio-group-who占满column-who的空间 */
display: flex;
flex-direction: column;
}
.radio {
flex: 1; /* 使每个radio占满radio-group-who的空间，并平均分配 */
display: flex;
align-items: center; /* 水平居中 */
}
现在发现左边三列的高度不一样，想要吧这三列高度对齐有什么办法吗？或者每一列的东西居中对齐
1.使用flex布局（可能会有兼容问题）
2.根据选项最多列计算固定高度（行高*选项个数），然后其他列表每行根据百分比设置高度，然后在设置行内垂直居中。
3.根据选项先判断出最多项的个数，然后其他较少选项的列在适当位置插入空行（高度每个项一致），这样无法做到平均对齐。
那么高度就是5*30px=150px，3行的每行高度就是50px。