html - flexbox 没有采用正确的宽度 Angular
问题描述
我创建了一个弹性表,它没有向我显示正确的表,只有第一个表很好,其他表的宽度不同。我试图在课程计划中放入另一个 div,但随后没有在行中显示我。
<div class="planning-videx">
<div class="name-block" *ngFor="let valueItem of showVI()">
{{valueItem.name}}
<div class="planned">
{{actualCosts | moneyFormat}}
</div>
<div class="planned">
{{plannedCosts | moneyFormat}}
</div>
</div>
</div>
这是CSS
$row-background-color: white;
$row-height: 100%;
$content-height: 45px;
.planning-videx {
@extend .vp-column;
margin-left: 10px;
overflow: auto;
max-height: $row-height;
.name-block {
@extend %common-block;
@include center(false, true);
@include justify-content(space-between);
height: 40px;
margin-left: 1px;
padding-left: 10px;
div.planned {
@extend %flexbox;
@include center(false, true);
border-left: solid thin $border-color;
padding: 0 5px;
width: 150px;
height: 100%;
}
}
.costs-block {
@extend %common-block;
@include center();
@include justify-content(flex-end);
margin-left: 10px;
padding-right: 5px;
width: 100px;
flex-direction: row;
}
}
%common-block {
@extend .vp-row;
background-color: $row-background-color;
margin-top: 1px;
margin-bottom: 1px;
min-height: $content-height;
border: solid thin $border-color;
border-radius: 3px;
}
解决方案
我会为货币类别设置一个弹性基础或设置宽度,然后为标题设置一个“弹性:1”,以便它可以增长到剩余空间。
推荐阅读
- jsonpath - 需要 JSONPath 帮助
- tensorflow - 如何迭代引用索引和单个张量的tensorflow tensor_list
- sass - 如何解决 Sass '错误:预期更多输入'
- java - 如何在方法之间传递参数并使用Java正确调用方法?
- django - 如何通过文件与cmd交互?
- bash - 使用 AWK 解析命名参数值
- python - Python - 比较两个列表以查找项目包含不等于的匹配项目?
- python - 如果对象存在,Django过滤并显示在模板中
- javascript - Express Validator 5.3 - 如果第二个参数包含在给定数组中,则为必需参数
- c# - 尝试读取数据库 C# 错误