使flex项目具有相等的宽度

Question

如果你看下面的例子，我希望标题（ h4.child-title ）在父容器中具有相同的长度。

但我没有成功实现这一目标。

任何帮助表示赞赏。

 .top-level { display: flex; flex-flow: row wrap; } .section { display: flex; flex-flow: row nowrap; border: 1px solid; margin-right: 12px; margin-top: 12px; } .section-child { display: flex; flex-flow: column nowrap; align-items: center; flex: 1 1 0; } .child-title { white-space: nowrap; } .vertical-separator { width: 1px; background-color: rgba(0, 0, 0, 0.3); margin: 8px; } 

 <div class="top-level"> <section class="section"> <div claas="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> <section class="section"> <div claas="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> <section class="section"> <div claas="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> </div> 

Answer 1

Flexbox方法

为了使文本项（ .section-child ）的宽度相等，你需要使用flex: 1 1 0 ，你已经完成了。 这与说flex: 1相同。

但是，这本身并没有达到目的，原因有两个：

1. .section-child的父.section-child ，Flex容器，但也是较大容器中的弹性项，默认情况下限制为其内容的宽度。 所以它不会扩展，文本可以溢出容器。 您还需要应用flex: 1到.section 。

2. 默认情况下，弹性项不能小于其内容的大小。 初始设置为min-width: auto 。 因此flex: 1无法平均分配容器空间，因为flex项目无法收缩超过最长的项目。 您需要使用min-width: 0覆盖此行为。

 .top-level { display: flex; flex-flow: row wrap; } .section { display: flex; flex-flow: row nowrap; border: 1px solid; margin-right: 12px; margin-top: 12px; flex: 1; min-width: 0; } .section-child { display: flex; flex-flow: column nowrap; align-items: center; flex: 1; min-width: 0; } .child-title { white-space: nowrap; } .vertical-separator { width: 1px; background-color: rgba(0, 0, 0, 0.3); margin: 8px; } 

 <div class="top-level"> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> </div> 

现在所有弹性项目的宽度都相等。 但是，因为您将文本设置为nowrap ，所以它可以溢出其边界。 如果你删除nowrap ，一切都很合适。

 .top-level { display: flex; flex-flow: row wrap; } .section { display: flex; flex-flow: row nowrap; border: 1px solid; margin-right: 12px; margin-top: 12px; flex: 1; min-width: 0; } .section-child { display: flex; flex-flow: column nowrap; align-items: center; flex: 1; min-width: 0; } .child-title { /* white-space: nowrap; */ } .vertical-separator { width: 1px; background-color: rgba(0, 0, 0, 0.3); margin: 8px; } 

 <div class="top-level"> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> </div> 

更多信息：

• 根据原始大小制作flex-grow扩展项目
• 为什么flex项目不会缩小内容大小？

---

CSS网格方法

如果你的实际目标是使行中的所有flex项目等于最长项目的宽度，那就是flexbox无法做到的。

Flex可以执行相等宽度和相同高度的弹性项目，因为它在主轴上提供flex: 1 。

Flex也可以做相等宽度和相等高度的列/行，因为它提供了align-items: stretch在横轴上align-items: stretch 。

但是在flexbox规范中没有关于基于特定兄弟的大小的相同大小的弹性项目的内容。 但是，flexbox的姐妹技术CSS Grid可以做到这一点。

通过使用Grid的fr单位，网格中列的宽度可以设置为最长列的宽度。

 .top-level { display: flex; flex-flow: row wrap; } .section { display: grid; grid-template-columns: 1fr 1px 1fr 1px 1fr; margin-right: 12px; margin-top: 12px; } .section-child { display: flex; justify-content: center; align-items: center; min-width: 0; background-color: green; } .child-title { /* white-space: nowrap; */ } .vertical-separator { background-color: rgba(0, 0, 0, 0.3); margin: 8px; } 

 <div class="top-level"> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Much much longer title text text text text text text text text text text</h4> <!--A lot more content here--> </div> </section> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Longer title text text text text text text</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="vertical-separator"></div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> </div> 

以下是它的工作原理：

• CSS网格布局中的等高行

Answer 2

Flexbox不是表布局的完美选择，但你可以接近：

• 将flex: 1 1 100%添加到sectionchild ，并且基于设置为100％，它将同等缩小（或增长）

• 添加overflow: hidden或min-width ，告诉section-child他们被允许小于他们的内容

• 添加flex-basis: 100% ，或flex-grow: 1 ，到section ，它将完全与其父top-level ， top-level

作为vertical-separator ，我改为在每个section-child上使用伪::after ，但是第一个，因为它使用绝对位置，所以在section-child上需要position: relative 。

 .top-level { display: flex; flex-flow: row wrap; } .section { flex-basis: 100%; /* added */ display: flex; flex-flow: row nowrap; border: 1px solid; margin-right: 12px; margin-top: 12px; } .section-child { position: relative; /* added */ display: flex; flex-flow: column nowrap; align-items: center; flex: 1 1 100%; /* added */ overflow: hidden; /* added */ } .child-title { white-space: nowrap; } .section-child + .section-child::after { content: ''; position: absolute; left: 0; top: 10%; height: 80%; border-left: 1px solid rgba(0,0,0,0.3); } 

 <div class="top-level"> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> </div> 

Answer 3

在你的代码中，你多次写过claas而不是class ：

<div claas="section-child">
  <h4 class="child-title">Title</h4>
  <!--A lot more content here-->
</div>

然后你应该通过删除vertical-separator div并使用css边框来简化你的html结构：

 .top-level { display: flex; flex-flow: row wrap; } .section { display: flex; flex-flow: row nowrap; border: 1px solid; margin-right: 12px; margin-top: 12px; } .section-child { display: flex; flex-flow: column nowrap; align-items: center; flex: 1 1 0; } .section-child:not(:last-of-type) { margin: 8px 0; border-right: solid 1px rgba(0, 0, 0, 0.3); } .child-title { white-space: wrap; } 

 <div class="top-level"> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> <section class="section"> <div class="section-child"> <h4 class="child-title">Title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Longer title</h4> <!--A lot more content here--> </div> <div class="section-child"> <h4 class="child-title">Much much longer title</h4> <!--A lot more content here--> </div> </section> </div> 

我删除了white-space: nowrap for .child-title因为flex值只是提示而没有包装“更长的标题”会占用太多空间。 如果你真的想使用nowrap ，你必须确保你的容器足够大并且可能使用溢出。