使Flex项目连续具有相同的宽度 [英] Make flex items have equal width in a row
本文介绍了使Flex项目连续具有相同的宽度的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如果你看下面的例子，我希望头文件（ h4.child-title ）在父容器中具有相同的长度。
但是我没有成功实现这一目标。
任何帮助都是值得赞赏的。
.top-level {display：flex; flex-flow：row wrap;}。section {display：flex; flex-flow：排列nowrap; border：1px solid; margin-right：12px; margin-top：12px;}。section-child {display：flex; flex-flow：立柱; 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 - 电平> < section class =section> < div claas =section-child> < h4 class =child-title>标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>更长的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>多得多的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < /节> < section class =section> < div claas =section-child> < h4 class =child-title>标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>更长的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>多得多的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < /节> < section class =section> < div claas =section-child> < h4 class =child-title>标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>更长的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>多得多的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < / section>< / div>
解决方案
Flexbox方法
为了使文本项目（ .section-child ）等宽，你需要使用 flex：1 1 0 ，你已经完成了。这与
相同。但是，这本身并不能达到有两个原因：
-
.section-child， flex容器，而且在较大容器中的flex项目，默认情况下仅限于其内容的宽度。所以它不会扩展，文本会溢出容器。您还需要将flex：1应用于.section。 -
默认情况下，Flex项目的大小不能小于其内容的大小。初始设置是
min-width：auto。因此，flex：1无法平均分配容器空间，因为Flex项目无法收缩超过最长项目。您需要用min-width：0。 - 使Flex-grow扩展项目基于他们的原始大小
- 为什么flex项目收缩过去的内容大小？
CSS网格方法
如果您的实际目标是让该行中的所有弹性项目等于最长项目的宽度，那么这是flexbox无法做到的事情。
Flex can做相等宽度和平等高度的flex项目，因为它在主轴上提供
flex：1。
Flex can因为它在横轴上提供了
align-items：stretch。
<但是Flexbox规范中没有关于基于特定同级大小的同等大小Flex项目的规定。然而，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;最小宽度：0;背景颜色：绿色; } .child-title {/ * white-space：nowrap; * /}。vertical-separator {background-color：rgba（0，0，0，0.3）; margin：8px;}< div class =top - 电平> < section class =section> < div class =section-child> < h4 class =child-title>标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>更长的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>多得多的标题文本文本文本文本文本文本文本文本文本文本< / h4> <！ - 这里有更多内容 - > < / DIV> < /节> < section class =section> < div class =section-child> < h4 class =child-title>标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>更长的标题文本文本文本文本文本文本< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>多得多的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < /节> < section class =section> < div class =section-child> < h4 class =child-title>标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>更长的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>多得多的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < / section>< / div>作品：
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 useflex: 1 1 0, which you have done. This is the same as sayingflex: 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 applyflex: 1to.section, as well.A flex item cannot be smaller than the size of its content, by default. The initial setting is
min-width: auto. Soflex: 1cannot work to equally distribute container space, because a flex item cannot shrink past the longest item. You need to override this behavior withmin-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 removenowrap, 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:
- Make flex-grow expand items based on their original size
- Why doesn't flex item shrink past content size?
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: 1on the main axis.Flex can also do equal width and equal height columns / rows, because it provides
align-items: stretchon 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
frunit, 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屋！
覆盖此行为
.top-level {display：flex; flex-flow：row wrap;}。section {display：flex; flex-flow：排列nowrap; border：1px solid; margin-right：12px; margin-top：12px; flex：1; min-width：0;}。section-child {display：flex; flex-flow：立柱; 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 - 电平> < section class =section> < div class =section-child> < h4 class =child-title>标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>更长的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>多得多的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < /节> < section class =section> < div class =section-child> < h4 class =child-title>标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>更长的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>多得多的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < /节> < section class =section> < div class =section-child> < h4 class =child-title>标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>更长的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>多得多的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < / section>< / div>
项目是相等的宽度。但是，因为您将文本设置为 nowrap ，所以它可能会溢出其边界。如果您删除 nowrap ，那么一切都很合适。
.top-level {display：flex; flex-flow：row wrap;}。section {display：flex; flex-flow：排列nowrap; border：1px solid; margin-right：12px; margin-top：12px; flex：1; min-width：0;}。section-child {display：flex; flex-flow：立柱; 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 - 电平> < section class =section> < div class =section-child> < h4 class =child-title>标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>更长的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>多得多的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < /节> < section class =section> < div class =section-child> < h4 class =child-title>标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>更长的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>多得多的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < /节> < section class =section> < div class =section-child> < h4 class =child-title>标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>更长的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < div class =vertical-separator>< / div> < div class =section-child> < h4 class =child-title>多得多的标题< / h4> <！ - 这里有更多内容 - > < / DIV> < / div>< / div>
查看全文
