手写栅栏布局

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%;