如果您查看下面的示例，我希望标题（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>
答案 0 :(得分：11)
为了使文本项（.section-child）的宽度相等，您需要使用已完成的flex: 1 1 0。这与说flex: 1相同。
然而，由于两个原因，这本身并没有实现目标：
默认情况下，.section-child的父级，Flex容器，以及更大容器中的弹性项，限制为其内容的宽度。所以它不会扩展，文本可以溢出容器。您还需要将flex: 1应用于.section。
默认情况下，弹性项目不能小于其内容的大小。初始设置为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>
更多信息：
如果您的实际目标是使行中的所有弹性项目等于最长项目的宽度，那就是flexbox无法做到的。
Flex可以执行相等宽度和相同高度的弹性项目，因为它在主轴上提供flex: 1。
Flex也可以做相等宽度和相等高度的列/行，因为它在横轴上提供align-items: stretch。
但是，根据特定兄弟的大小，flexbox规范中没有关于大小相同的弹性项目的内容。但是，flexbox的姐妹技术CSS 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>
以下是它的工作原理：
答案 1 :(得分：4)
Flexbox不是表布局的完美选择，但你可以接近：
将 public static void main(String[] args) {
boolean done = false;
Integer sayi1 = null;
do {
System.out.println("Please enter a math value.");
Scanner sayiyaz = new Scanner(System.in);
if (sayiyaz.hasNextInt()) {
sayi1 = sayiyaz.nextInt();
done = true;
} else {
System.out.println("Input is wrong ");
}
} while (!done);
System.out.println("Here is youre input " + sayi1);
}
添加到flex: 1 1 100%，并根据设置为100％而缩小（或增长）
添加sectionchild或overflow: hidden，告诉min-width他们被允许小于其内容
将section-child或flex-basis: 100%添加到flex-grow: 1，并且会完全使用其父级section
作为top-level，我在每个vertical-separator上使用了伪::after，但是第一个，因为它使用绝对位置，所以需要section-child position: relative。
section-child.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);
}
答案 2 :(得分：2)
在您的代码中，您多次编写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 .child-title，因为弹性值只是提示而没有包装＆＃34;标题更长＆＃34;会占用太多空间。如果你真的想使用nowrap，你必须确保你的容器足够大并且可能使用溢出。