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

Question

我有多个div。 每个内部我都有label和span 。

我希望标签的宽度由最长的标签设置，并且跨度将全部从同一点开始。

 .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> 

Answer 1

试试这个小提琴 ，

我更改了display:flex .container -row'以获得相同宽度的.container ，然后使用这个CSS

.container{
    display:table-row;

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

Answer 2

如果要将flexbox用于此布局，则需要重新构建HTML。

Flex项目可以共享相同的高度/宽度，但前提是它们是兄弟姐妹。

 article { display: flex; } .container { display: flex; flex-direction: column; } /* non-essential decorative styles */ .key { background-color: aqua; } .value { background-color: pink; } .container > * { margin: 2px; padding: 2px; border: 1px solid #999; } 

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

jsFiddle演示

Answer 3

你可以简单地使用display: table ：

HTML：

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

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

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

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

CSS：

.article {
  display: table;
}

.container {
  display: table-row;
}

label {
  display: table-cell;
  background-color: aqua;
}

span {
  display: table-cell;
  background-color: orange;
}

小提琴