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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

Can I use?

› http://caniuse.com/

Less

› http://lesscss.org

Cool Libraries

› Bootstrap from Twitter

› Jetstrap

这是一个创建于 464 天前的主题，其中的信息可能已经有所发展或是发生改变。

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

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

计算

确定

flex

键盘

9 条回复 • 2023-08-16 21:53:46 +08:00

weiwoxinyou

2023-08-15 23:35:50 +08:00

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

chnwillliu

2023-08-16 09:41:08 +08:00 via Android

flex 也能用 gap 啊。

chnwillliu

2023-08-16 09:57:33 +08:00 via Android

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

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

xxmym

2023-08-16 11:07:08 +08:00

.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

2023-08-16 11:22:20 +08:00 via Android

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

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

xxmym

2023-08-16 11:28:15 +08:00

@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

2023-08-16 21:03:30 +08:00

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

daiwenzh5

2023-08-16 21:04:54 +08:00

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

twf199410406

2023-08-16 21:53:46 +08:00

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