Flexbox 计算器未正确对齐
我确信计算器是一个常见的项目，但我在这里使用 Flexbox 真的很困难。我为每个计算器按钮行都有一个行类，以及不同的按钮大小。但是最后一个按钮将沿着新行移动，而不是停留在该行的原始行中，即使它们有足够的宽度。
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 0;
}
.wrapper {
display: flex;
flex-direction: column;
background-color: #0f0f0f;
color: #fff;
width: 400px;
align-content: stretch;
justify-content: space-between;
font-family: Helvetica, Arial, sans-serif;
}
/* ROWS */
.result-row {
width: 100%;
font-family: monospace;
background-color: #0f0f0f;
text-align: right;
}
.row {
width: 100%;
}
/* BUTTONS */
.small {
width: 24.5%;
}
.medium {
width: 49.5%;
}
.large {
width: 74.5%;
}
.button {
border: 0;
border-radius: 0;
}
<div class="wrapper">
<div class="result-row">
0
</div>
<div class="row">
<button class="medium button">C</button>
<button class="small button">←</button>
<button class="small button">÷</button>
</div>
<div class="row">
<button class="small button">7</button>
<button class="small button">8</button>
<button class="small button">9</button>
<button class="small button">X</button>
</div>
我真的不明白这里发生了什么，我认为只要容器中有足够的空间，div 中的元素就不能在带有 Flexbox 的新“行”中占用空间。
翻翻过去那场雪1回答
-
三国纷争
由于flex子项只从父项继承一级，因此还需要在.rows上设置flex显示。.row { width: 100%; display: flex; flex-wrap: nowrap;}* { box-sizing: border-box;}body { margin: 0; padding: 0;}.wrapper { display: flex; flex-direction: column; background-color: #0f0f0f; color: #fff; width: 400px; align-content: stretch; justify-content: space-between; font-family: Helvetica, Arial, sans-serif;}/* ROWS */.result-row { width: 100%; font-family: monospace; background-color: #0f0f0f; text-align: right;}.row { width: 100%; display: flex; flex-wrap: nowrap;}/* BUTTONS */.small { width: 24.5%;}.medium { width: 49.5%;}.large { width: 74.5%;}.button { border: 0; border-radius: 0;}<div class="wrapper"> <div class="result-row"> 0 </div> <div class="row"> <button class="medium button">C</button> <button class="small button">←</button> <button class="small button">÷</button> </div> <div class="row"> <button class="small button">7</button> <button class="small button">8</button> <button class="small button">9</button> <button class="small button">X</button> </div> <div class="row"> <button class="small button">4</button> <button class="small button">5</button> <button class="small button">6</button> <button class="small button">-</button> </div> <div class="row"> <button class="small button">1</button> <button class="small button">2</button> <button class="small button">3</button> <button class="small button">+</button> </div> <div class="row"> <button class="large button">0</button> <button class="small button">=</button> </div></div>jsFiddle
随时随地看视频慕课网APP
Go