我是Flexbox的新手，想了解它是如何作業的。我有一個
我想保留這個組件的高度，因為它目前對我來說是完美的，但是我想在旁邊的一個單獨的列中添加三行按鈕（開始、暫停、第一）。我希望這第二列能包起來，并與左邊的時鐘高度一致。
我試著創建了兩個 Flexboxes，但我不確定如何讓其中一個參考另一個的高度并調整其大小。我怎樣才能做到這一點呢？
uj5u.com熱心網友回復：
通過使用flexbox，很容易實作這個目標。
正如你在下面的片段中看到的那樣。我已經重新創建了你的要求。
但目前上/下按鈕之間有一個空格，以便與最右邊的按鈕（3個按鈕）保持一致。
如果你想把2個按鈕填滿整個空間，你可以給這些按鈕一個填充物，以便與3個按鈕列相匹配。
。* {
box-sizing: border-box;
}
.wrapper,
.clock-wrapper,
.action-wrapper。
.btn-wrapper {
display: flex;
}
.btn-wrapper button {
padding: 5px 10px;
}
.action-wrapper,
.btn-wrapper {
flex-direction: 列。
justify-content: space-between;
}
input {
height: 100%;
字體大小: 30px;
width: 100px;
font-weight: bold;
text-align: center;
}<div class="wrapper"> /span>
<section class="clock-wrapper">/span>
<div class="btn-rapper">/span>
<button>Up</button>/span>
<button>/span>Down</button>/span>
</div>/span>
<div>/span>
<input type="text"/span> value="10。 35"/span> />
</div>
<div class="btn-wrapper">
<button>Up</button>/span>
<button>/span>Down</button>/span>
</div>/span>
</section>/span>
<section class="action-wrapper">
<button>Start</button>
<button>Reset</button>
<button>第1</button>
</section>/span>
</div>/span>uj5u.com熱心網友回復：
.btns-column button {
高度:50%。
}
如果你想讓上下按鈕與時鐘高度一致，就添加這個，
'btns-column'的高度由flexbox決定，你做得很好，但是按鈕需要包住'btns-column'的高度
。轉載請註明出處，本文鏈接：https://www.uj5u.com/net/326606.html
標籤：