我確信計算器是一個常見的項目，但我在這里使用 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 回答
三國紛爭
TA貢獻1804條經驗 獲得超7個贊
由于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>
- 1 回答
- 0 關注
- 167 瀏覽
添加回答
舉報
0/150
提交
取消