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

试试这个fiddle，

我将 group = mur broker-name = mur-broker connectors=openwire kind = MasterSlave data = ${runtime.data}mur-broker config=profile\:broker-mur.xml config.checksum=${checksum:profile\:broker-mur.xml} standby.pool=default bindAddress=0.0.0.0 bindPort=61617 更改为'table-row'以获得相同的display:flex宽度，然后使用此CSS

.container

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 demo

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

Fiddle