Flex框将最大子宽度分配给其他子宽度

Question

我有一群孩子的宽度应该相似。要将具有最大宽度的简单孩子分配给其他孩子。我尝试使用flexbox但无法获得它。是否可以在弹性框中实现，或者我应该选择JS解决方案。请参考我尝试过的示例。请不要发布任何javascript答案。

.flex{
  display:flex;
  flex-direction:column;
  align-items:baseline
}
.flex > div{
  background:#aaa
}

<div class="flex">
  <div>
      Text to check
  </div>
    <div>
      Text to check for similar width
  </div>
   <div>
      Text to check for similar width - will it work
  </div>
</div>

Answer 1

使用display:inline-flex;并为项目指定宽度为100％。

.flex{
  display:inline-flex;
  flex-direction:column;
  align-items:baseline
}
.flex > div{
  background:#aaa;
  width: 100%;
}

<div class="flex">
  <div>
      Text to check
  </div>
    <div>
      Text to check for similar width
  </div>
   <div>
      Text to check for similar width - will it work
  </div>
</div>

已更新，感谢 @vals comment

或者更改为align-items: stretch上的container，然后将width: 100%放在商品上。

.flex{
  display:inline-flex;
  flex-direction:column;
  align-items:stretch;
}
.flex > div{
  background:#aaa
}

<div class="flex">
  <div>
      Text to check
  </div>
    <div>
      Text to check for similar width
  </div>
   <div>
      Text to check for similar width - will it work
  </div>
</div>

Answer 2

根本不需要使用弹性或浮动。

只需为父容器提供inline-block的显示声明。

父级的宽度将扩展以适应最宽的孩子的宽度 - 但不会更多。

同时，由于所有子节点都是块级元素，它们的宽度将全部扩展以匹配父容器的宽度。

ie。 所有子块级元素将以与最宽子元素相同的宽度显示。

示例：

＆＃13;

＆＃13;

.inline-block {
display: inline-block;
}

.inline-block > div {
margin: 6px;
padding: 12px;
background-color:#aaa
}

＆＃13;

<div class="inline-block">
<div>Text to check</div>
<div>Text to check for similar width</div>
<div>Text to check for similar width - will it work?</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

.flex {
  width: auto;
  float: left;
}
.flex > div {
  background: #aaa;
  width: 100%;
}

＆＃13;

<div class="flex">
  <div>
      Text to check
  </div>
    <div>
      Text to check for similar width
  </div>
   <div>
      Text to check for similar width - will it work
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

无需弯曲。你可以这样试试。