关于使用 flex 实现数字键盘的问题讨论：如何计算？

[daiwenzh5]

如题，不考虑 grid 布局，实现一个数字键盘。
布局类型于
```text
1 2 3 删除
4 5 6 确定
7 8 9 确定
. 0 清零 确定
```
其中“确定”键纵向合并，要求自适应。
我自己计算了一下每个按键的宽度，但是不对，调整了一下，如：
参考： https://codepen.io/daiwenzh5/pen/JjegqWK

现在的问题是，怎么计算，或者计算公式是什么？我是调试出来的，虽然也不复杂，花不了多少时间，但不该这样的。

[weiwoxinyou]

固定一个宽度(min-width)，然后嵌套 div ，对每行进行 flex 分布，多行进行 flex 纵向排列，确定键的宽度自适应应该差不多符合你的需求

[chnwillliu]

flex 也能用 gap 啊。

[chnwillliu]

明白你的意思了，flex 嵌套的情况下由于 gap 的存在导致 number 和 fn 两列的宽度比没法表示。

非要用 flex 的话可以把最左边的 gap 单独拎出来不参与横向 flex 空间分配，这样下来宽度就是 3:1 了，然后内部 keyboard-number 再把右边的 gap 剔除 flex 空间分配，三列数字仍然可以用 gap + space-between 而无需计算自己的宽度。

[xxmym]

.keyboard-number {
        width: 100%;
        height: 300px;
        display: flex;
        flex-flow: column;
        flex-wrap: wrap;
      }
      .key-item {
        min-width: 24%;
        min-height: 24%;
        flex: 1;
      }
      .key-comfirm {
        flex: 3;
      }

没这么复杂呀，这样不就自适应了吗

[chnwillliu]

你要能接受按钮再套一层标签，可以一个 calc 都不用。

https://codepen.io/Will-Liu-/pen/ZEVzORK

[xxmym]

@xt3153

      <view class="keyboard-number">
        <view class="key-item">1</view>
        <view class="key-item">4</view>
        <view class="key-item">7</view>
        <view class="key-item">.</view>
        <view class="key-item">2</view>
        <view class="key-item">5</view>
        <view class="key-item">8</view>
        <view class="key-item">0</view>
        <view class="key-item">3</view>
        <view class="key-item">6</view>
        <view class="key-item">9</view>
        <view class="key-item">清零</view>
        <view class="key-item">删除</view>
        <view class="key-item key-comfirm">确定</view>
      </view>

[daiwenzh5]

@chnwillliu #5 确实不想嵌套的...

[daiwenzh5]

@chnwillliu #3 有道理，后面试试

[twf199410406]

@xt3153 你这个通俗易懂 给你上一票 但是样式维护要麻烦点