<div class="section-child"><h4 class="child-title">Title</h4><!--这里有更多内容--><div class="vertical-separator"></div><div class="section-child"><h4 class="child-title">更长的标题</h4><!--这里有更多内容-->
<div class="vertical-separator"></div><div class="section-child"><h4 class="child-title">更长的标题</h4><!--这里有更多内容-->
</节>
更多信息:
<小时>CSS 网格方法
如果您的实际目标是使行中的所有 flex 项目都等于最长项目的宽度，那么 flexbox 就无法做到这一点.
Flex 可以做等宽和等高的 flex 项，因为它在主轴上提供了 flex: 1.
Flex 还可以做等宽和等高的列/行，因为它在横轴上提供了align-items:stretch.
但是 flexbox 规范中没有关于基于特定兄弟的大小相等大小的 flex 项的内容.但是，flexbox 的姊妹技术 CSS Grid 可以做到.
通过使用Grid的fr单位，可以将网格中的列宽设置为最长列的宽度.
.top-level {显示:弹性；flex-flow:行包装；}.部分 {显示:网格；网格模板列:1fr 1px 1fr 1px 1fr；右边距:12px；边距顶部:12px；}.section-child {显示:弹性；对齐内容:居中；对齐项目:居中；最小宽度:0；背景颜色:绿色；}.child-title {/* 空白:nowrap;*/}.垂直分隔符{背景颜色:rgba(0, 0, 0, 0.3);边距:8px；}
<div class="section-child"><h4 class="child-title">Title</h4><!--这里有更多内容-->
<div class="vertical-separator"></div><div class="section-child"><h4 class="child-title">更长的标题</h4><!--这里有更多内容-->
<div class="vertical-separator"></div><div class="section-child"><h4 class="child-title">更长的标题文本文本文本文本文本文本文本文本文本</h4><!--这里有更多内容-->
</节><div class="section-child"><h4 class="child-title">Title</h4><!--这里有更多内容--><div class="vertical-separator"></div><div class="section-child"><h4 class="child-title">较长的标题文本文本文本文本文本<!--这里有更多内容-->
<div class="vertical-separator"></div><div class="section-child"><h4 class="child-title">更长的标题</h4><!--这里有更多内容-->
</节><div class="section-child"><h4 class="child-title">Title</h4><!--这里有更多内容--><div class="vertical-separator"></div><div class="section-child"><h4 class="child-title">更长的标题</h4><!--这里有更多内容-->
<div class="vertical-separator"></div><div class="section-child"><h4 class="child-title">更长的标题</h4><!--这里有更多内容-->
</节>
这是它的工作原理:
If you look at the example below, I want the headers (h4.child-title) to have the same length within the parent container.
But I'm not successful in achieving this.
Any help is appreciated.
.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>
解决方案
Flexbox method
In order to make the text items (.section-child) equal width, you need to use flex: 1 1 0, which you have done. This is the same as saying flex: 1.
However, this by itself doesn't achieve the goal for two reasons:
The parent of .section-child, a flex container, but also a flex item in a larger container, is limited to the width of its content, by default. So it won't expand and the text can overflow the container. You need to apply flex: 1 to .section, as well.
A flex item cannot be smaller than the size of its content, by default. The initial setting is min-width: auto. So flex: 1 cannot work to equally distribute container space, because a flex item cannot shrink past the longest item. You need to override this behavior with 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>
Now all flex items are equal width. However, because you have the text set to nowrap, it can overflow its boundaries. If you remove nowrap, everything fits nicely.
.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>
More information:
CSS Grid method
If your actual goal is to make all flex items in the row equal to the width of the longest item, that's something flexbox cannot do.
Flex can do equal width and equal height flex items, because it provides flex: 1 on the main axis.
Flex can also do equal width and equal height columns / rows, because it provides align-items: stretch on the cross axis.
But there is nothing in the flexbox spec about equal size flex items based on the size of a particular sibling. However, flexbox's sister technology, CSS Grid, can do it.
By using Grid's fr unit, the width of columns in a grid can be set to the width of the longest column.
.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>
Here's how it works:
这篇关于使 flex 项目在一行中具有相等的宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
