Flex box将最大子元素的宽度分配给其他子元素的宽度

Question

我有一组子元素，它们的宽度应该相似。简单来说，最宽的子元素应该分配给其他子元素。我尝试使用flexbox但是没有成功。在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>

- Santhosh Kumar

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，并且在项目上删除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>

- Asons

---

好的答案！此外，可以在容器上更改align-items: stretch; - vals

Answer 2

不需要使用flex或浮动。

只需为父容器添加一个inline-block的显示声明即可。

父元素的宽度会根据最宽的子元素而扩展，但不会超过这个宽度。

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

也就是说，所有子块级元素的宽度将会和最宽的子元素一样。

例如：

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

- Rounin - Standing with Ukraine

---

为了出色的浏览器支持，加1个赞 :) - Asons

Answer 3

.flex {
  width: auto;
  float: left;
}
.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>

不需要使用flex。您可以尝试像这样。

- LIJIN SAMUEL