带Flexbox的计算器键盘布局

将凹凸不平的钥匙包装在自己的伸缩容器中，然后从那里去。

* { box-sizing: border-box; }     .flexBoxContainer {    display: flex;    justify-content: space-around;    align-items: center;    width: 100%;}.calculator {    display: flex;    flex-wrap: wrap;    justify-content: center;    align-content: center;    width: 100%;}.calculator .keys {    border: red 1px solid;    height: 50px;    width: 25%;    break-inside: avoid;}.calculator input {    height: 100px;    width: 100%;    direction: rtl;}#anomaly-keys-wrapper {    display: flex;    width: 100%;}#anomaly-keys-wrapper > section:first-child {    display: flex;    flex-wrap: wrap;    width: 75%;}#anomaly-keys-wrapper > section:first-child > div {         flex: 1 0 33.33%;}#anomaly-keys-wrapper > section:first-child > div:nth-child(4) {       flex-basis: 66.67%;}#anomaly-keys-wrapper > section:last-child {     width: 25%;    display: flex;    flex-direction: column;}#anomaly-keys-wrapper .tall {         width: 100%;    flex: 1;}@media (min-width: 321px) {    .calculator {        width: 320px;    }}<div >    <div >        <input />        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <div ></div>        <section id="anomaly-keys-wrapper"> <section>     <div ></div>     <div ></div>     <div ></div>     <div ></div>     <div ></div> </section> <section>     <div ></div> </section>        </section>    </div></div>

笔记：

1. 在

   width

   /

   height

   计算中包括填充和边框。
2. 将不均匀的键包装在单独的flex容器中（默认值

   flex-direction: row

   和

   flex-wrap: nowrap

   ）
3. 在启用了环绕功能的情况下，将 长 键包裹在一个单独的flex容器中（并吸收足够的同级物以与 高 键产生相等的高度）。
4. 每行最多强制三个键。
5. 用 长 两倍于兄弟姐妹宽度的 长 键。（

   long

   由于特异性较弱，因此未使用较简单的类选择器。）
6. 将 高 钥匙包在垂直方向的单独的伸缩容器中。
7. 使 高 钥匙消耗所有可用宽度和高度的容器。

更新

从评论：

嗨，1.您能解释一下弹性基准的工作原理吗？以及为什么使用它而不是将宽度设置为长按钮。2.为什么需要给出flex：1;
到高大的按钮，因为我读过它是默认值。

问题1：

第一子节容器（包含

.long

flex: 1 0 33.33%

这是简写

flex-grow: 1

flex-shrink: 0

flex-basis: 33.33%

对于

.long

flex-basis

66.67%

另外，在这种情况下，

width

flex-basis

flex-basis

flex-basis

使用

width

flex-basis:33.33%

width

.long

有关

flex-basis

width

问题2：

因为

flex-grow

0