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 评论

或者更改为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

根本不需要使用 flex 或浮动。

只需给父容器一个inline-block.

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

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

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

例子：

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

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

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