我正在尝试创建一个看起来像这样的面板:
-------------------------------------------
| | |
| Ready 3 Not Ready 2 | Total |
| A | 16 |
| Talking 4 Outbound 3 | |
-------------------------------------------
我的第一个想法是用 CSS flexbox
来做到这一点,我已经非常接近了。我遇到的问题是显示 Ready、Not Ready、Talking 和 Outbound
的面板中间部分。我希望每个元素的宽度相等并且没有自动换行。
我能够让它们的宽度相等。但是,我无法阻止这些元素自动换行。有谁知道我错过了什么?
.panel {
padding: 0 15px;
}
.panel>div {
display: flex;
align-items: center;
}
.panel-row {
flex-direction: column;
}
.panel-stats {
display: flex;
flex-direction: column;
border: 1px solid blue;
}
.panel-grid-row {
background: yellow;
display: flex;
flex-direction: row;
}
.panel-grid-item {
background: tomato;
flex: 1;
}
<div class="panel">
<div class="panel-container">
<div class="panel-icon">A</div>
<div class="panel-stats">
<div class="panel-grid-row">
<div class="panel-grid-item">Ready 7</div>
<div class="panel-grid-item">Not Ready 2</div>
</div>
<div class="panel-grid-row">
<div class="panel-grid-item">Talking 4</div>
<div class="panel-grid-item">Outbound 3</div>
</div>
</div>
<div class="panel-total panel-row">
<div class="total-label">Total</div>
<div class="total-num">16</div>
</div>
</div>
</div>
最佳答案
问题是 nowrap
是在容器宽度确定后计算的。
由于容器的宽度设置为默认的 auto
,因此首先根据环绕文本的长度计算该长度。
然后应用了nowrap
,明显拉长了文本,溢出了之前建立的容器宽度。
.panel {
padding: 0 15px;
}
.panel>div {
display: flex;
align-items: center;
}
.panel-row {
flex-direction: column;
}
.panel-stats {
display: flex;
flex-direction: column;
border: 1px solid blue;
}
.panel-grid-row {
background: yellow;
display: flex;
flex-direction: row;
}
.panel-grid-item {
background: tomato;
flex: 0 0 50%;
white-space: nowrap; /* equal width works if you remove nowrap */
}
<div class="panel">
<div class="panel-container">
<div class="panel-icon">A</div>
<div class="panel-stats">
<div class="panel-grid-row">
<div class="panel-grid-item" style="background-color: yellow">Ready 7</div>
<div class="panel-grid-item" style="background-color: lightgreen">Not Ready 2</div>
</div>
<div class="panel-grid-row">
<div class="panel-grid-item" style="background-color: yellow">Talking 4</div>
<div class="panel-grid-item" style="background-color: lightgreen">Outbound 3</div>
</div>
</div>
<div class="panel-total panel-row">
<div class="total-label">Total</div>
<div class="total-num">16</div>
</div>
</div>
</div>
最简单的解决方案(如果可以的话)是定义容器的宽度。
.panel {
padding: 0 15px;
}
.panel>div {
display: flex;
align-items: center;
}
.panel-row {
flex-direction: column;
}
.panel-stats {
display: flex;
flex-direction: column;
border: 1px solid blue;
}
.panel-grid-row {
background: yellow;
display: flex;
flex-direction: row;
width: 200px; /* NEW */
}
.panel-grid-item {
background: tomato;
flex: 0 0 50%;
white-space: nowrap; /* NEW */
}
<div class="panel">
<div class="panel-container">
<div class="panel-icon">A</div>
<div class="panel-stats">
<div class="panel-grid-row">
<div class="panel-grid-item" style="background-color: yellow">Ready 7</div>
<div class="panel-grid-item" style="background-color: lightgreen">Not Ready 2</div>
</div>
<div class="panel-grid-row">
<div class="panel-grid-item" style="background-color: yellow">Talking 4</div>
<div class="panel-grid-item" style="background-color: lightgreen">Outbound 3</div>
</div>
</div>
<div class="panel-total panel-row">
<div class="total-label">Total</div>
<div class="total-num">16</div>
</div>
</div>
</div>
关于html - 如何阻止 flexbox 换行并创建相等的宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49945252/