html
<div class="head-info">
<div class="key">{
{'address' | translate}}:</div>
<div class="value">{
{item.address}}</div>
</div>
css
.head-info {
display: flex;
flex-flow: row wrap;
.key {
flex: 0 0 31%;
}
.value {
flex: 0 0 69%;
}
}
效果
原理
flex-flow
属性是 flex-direction 和 flex-wrap 的简写。
flex-flow: row wrap;
flex-direction: row;
flex-wrap: wrap;
flex: 0 0 16.66666667%;
是 flex-grow 、flex-shrink 和 flex-basis的简写。
其中,flex-basis
表示项目的长度。
合法值:“auto”、“inherit” 或一个后跟 “%”、“px”、“em” 或任何其他长度单位的数字。
flex: 0 0 16.66666667%;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 16.6667%;