html – 使最长的flex项设置列的宽度

我有多个div.每个内部我都有标签和跨度.

我希望标签的宽度由最长的标签设置,跨度将全部从同一点开始.

.container {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<article>
  <div class="container">
    <label class="key">text</label>
    <span class="value">text</span>
  </div>
</article>

解决方法

试试这个 fiddle,

我将display：flex更改为’table-row’以获得相同宽度的.container,然后使用此CSS

.container{
    display:table-row;

}
label{
  display: table-cell;
   border:solid 1px red;
}
span{
  display: table-cell;
  border:solid 1px blue;
}