将凹凸不平的钥匙包装在自己的伸缩容器中，然后从那里去。
* { @R_528_2419@-sizing: border-@R_528_2419@; } /* 1 */
.flex@R_528_2419@Container {
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 { /* 2 */
display: flex;
width: 100%;
}
#anomaly-keys-wrapper > section:first-child { /* 3 */
display: flex;
flex-wrap: wrap;
width: 75%;
}
#anomaly-keys-wrapper > section:first-child > div { /* 4 */
flex: 1 0 33.33%;
}
#anomaly-keys-wrapper > section:first-child > div:nth-child(4) { /* 5 */
flex-basis: 66.67%;
}
#anomaly-keys-wrapper > section:last-child { /* 6 */
width: 25%;
display: flex;
flex-direction: column;
}
#anomaly-keys-wrapper .tall { /* 7 */
width: 100%;
flex: 1;
}
@media (min-width: 321px) {
.calculator {
width: 320px;
}
}
<div class="flex@R_528_2419@Container">
<div class="calculator">
<input />
<div class="keys"></div>
<div class="keys"></div>
<div class="keys"></div>
<div class="keys"></div>
<div class="keys"></div>
<div class="keys"></div>
<div class="keys"></div>
<div class="keys"></div>
<div class="keys"></div>
<div class="keys"></div>
<div class="keys"></div>
<div class="keys"></div>
<section id="anomaly-keys-wrapper">
<section>
<div class="keys"></div>
<div class="keys"></div>
<div class="keys"></div>
<div class="keys long"></div>
<div class="keys"></div>
</section>
<section>
<div class="keys tall"></div>
</section>
</section>
</div>
</div>
笔记：
从评论：
嗨，1.您能解释一下弹性基准的工作原理吗？以及为什么使用它而不是将宽度设置为长按钮。2.为什么需要给出flex：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-basisvs. 的完整说明width，请参见 *flex-basis和width有什么区别？
因为flex-grow组件的初始值为0source。
602392714
清零编程群