使最长的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

如果您想为此布局使用 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 2

试试这个小提琴，

我更改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;
}