不同flex容器中的flex项的等高列 [英] Equal height columns for flex items in different flex containers
本文介绍了不同flex容器中的flex项的等高列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在创建flexbox响应式网格时遇到问题，希望有人能指出正确的方向。
我想要所有的 .block div的高度相等， .bottom div绝对位于底部。这实际上是在当前解决方案中工作，但 当 h2 标题太长，达到2行时，我想要所有
这是否可能以某种方式？
/ p>我制作了一个Codepen来说明这个问题：
http://codepen.io/kenvdbroek/pen/eZKdEQ
h1，h2，h3 {margin：0;} body {margin：0; padding：0;} ul.clean-list {margin：0; padding：0;} ul.clean-list li {list-style：none; margin-bottom：5px;} li：last-child {margin-bottom：0;} container {padding-top：50px;}。 border：1px solid red;}。block> .bottom {border：1px solid blue;} @ media only screen and（min-width：480px）{.row.row-flex-wrapper :: before，.row.row-flex-wrapper :: after {content：none ！重要; } .row.row-flex-wrapper :: after {clear：none; } .row.row-flex-wrapper {display：-webkit-flex; display：-ms-flexbox;显示：flex; flex-wrap：wrap; -webkit-flex-wrap：wrap; -ms-flex-wrap：wrap; } .row.row-flex-wrapper .column {display：-webkit-flex; display：-ms-flexbox;显示：flex; float：none; border：1px solid orange; } .row.row-flex-wrapper .column> .block {display：-webkit-flex; display：-ms-flexbox;显示：flex; flex-direction：column; -ms-flex-direction：column; -webkit-flex-direction：column; } .row.row-flex-wrapper .column> .block> .block-list {flex：1 0 auto; -ms-flex：1 0 auto; -webkit-flex：1 0 auto; } .row.row-flex-wrapper .column> .block> h2 {}} @ media only screen and（min-width：480px）and（max-width：767px）{.container .row .column {width：50％; }}
< div class =container < div class =row row-flex-wrapper> < div class =column col-sm-6 col-md-4> < div class =block> < h2>标题1< / h2> < div class =block-list> < p> Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界标准的虚拟文本，自从1500年代，当一个未知的打印机采取类型的厨房，并加扰它，以制作一个类型的标本书。它不仅存活了五个世纪，而且飞跃到电子排版，基本保持不变。它在20世纪60年代得到普及，发布了包含Lorem Ipsum段落的Letraset表，最近还出现了Aldus PageMaker等桌面出版软件，包括Lorem Ipsum版本。< / p> < / div> < div class =bottom> < ul class =clean-list> < li>< a href =/ button>一些链接< / a> < / li> < li>< a href =/ button>部分链接2< / a> < / li> < / ul> < / div> < / div> < / div> < div class =column col-sm-6 col-md-4> < div class =block> < h2>另一个很长的标题，实际上太长了...< / h2> < div class =block-list> < p> Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界的标准虚拟文本，自从1500年代，当一个未知的打印机...< / p> < / div> < div class =bottom> < ul class =clean-list> < li>< a href =/ another-button>另一个按钮< / a> < / li> < / ul> < / div> < / div> < / div> < div class =column col-sm-6 col-md-4> < div class =block> < h2>标题< / h2> < div class =block-list> < p> Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界标准的虚拟文本，自从1500年代，当一个未知的打印机，Lorem Ipsum已经是业界的标准虚拟文本...< / p> < / div> < div class =bottom> < ul class =clean-list> < li>< a href =/ button>非常好的链接< / a> < / li> < / ul> < / div> < / div> < / div> < div class =column col-sm-6 col-md-4> < div class =block> < h2>这个块很酷！< / h2> < div class =block-list> < p>这里有一些文字。 Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界标准虚拟文本，自从1500年代，当一个未知的打印机，Lorem Ipsum已经是业界的标准虚拟文本...< / p> < / div> < div class =bottom> < ul class =clean-list> < li>< a href =/ button>另一个链接< / a> < / li> < li>< a href =/ button>检查此项目< / a> < / li> < / ul> < / div> < / div> < / div> < div class =column col-sm-6 col-md-4> < div class =block> < h2>标题栏< / h2> < div class =block-list> < p>查看此项目... Lorem Ipsum只是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界标准虚拟文本，自从1500年代，当一个未知的打印机，Lorem Ipsum已经是业界的标准虚拟文本...< / p> < / div> < div class =bottom> < ul class =clean-list> < li>< a href =/ button>按钮< / a> < / li> < / ul> < / div> < / div> < / div> < div class =column col-sm-6 col-md-4> < div class =block> < h2> Buttonssssss< / h2> < div class =block-list> < p> Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界标准的虚拟文本，自从1500年代，当一个未知的打印机采取类型的厨房，并加扰它，以制作一个类型的标本书。它不仅存活了五个世纪，而且飞跃到电子排版，基本保持不变。它在20世纪60年代得到普及，发布了包含Lorem Ipsum段落的Letraset表，最近还出现了Aldus PageMaker等桌面出版软件，包括Lorem Ipsum版本。< / p> < / div> < div class =bottom> < ul class =clean-list> < li>< a href =＃button>按钮< / a> < / li> < / ul> < / div> < / div> < / div> < div class =column col-sm-6 col-md-4> < div class =block> < h2>标题< / h2> < div class =block-list> < p> Lorem Ipsum只是印刷和排版行业的虚拟文本。< / p> < / div> < div class =bottom> < ul class =clean-list> < li>< a href =/ button>链接到项< / a> < / li> < li>< a href =/ button>链接到项< / a> < / li> < / ul> < / div> < / div> < / div> < div class =column col-sm-6 col-md-4> < div class =block> < h2>标题< / h2> < div class =block-list> < p> Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界标准的虚拟文本，自从1500年代，当一个未知的打印机采取类型的厨房，并加扰它，以制作一个类型的标本书。它不仅存活了五个世纪，而且飞跃到电子排版，基本保持不变。它在20世纪60年代得到普及，发布了包含Lorem Ipsum段落的Letraset表，最近还出现了Aldus PageMaker等桌面出版软件，包括Lorem Ipsum版本。< / p> < / div> < div class =bottom> < ul class =clean-list> < li>< a href =/ button>链接到项< / a> < / li> < / ul> < / div> < / div> < / div> < div class =column col-sm-6 col-md-4> < div class =block> < h2>另一个非常非常非常非常非常非常长的标题< / h2> < div class =block-list> < p> Lorem Ipsum仅仅是印刷和排版行业的虚拟文本。 Lorem Ipsum一直是业界标准的虚拟文本，自从1500年代，当一个未知的打印机采取类型的厨房，并加扰它，以制作一个类型的标本书。它不仅存活了五个世纪，而且飞跃到电子排版，基本保持不变。它在20世纪60年代得到普及，发布了包含Lorem Ipsum段落的Letraset表，最近还出现了Aldus PageMaker等桌面出版软件，包括Lorem Ipsum版本。< / p> < / div> < div class =bottom> < ul class =clean-list> < li>< a href =/ button>按钮到项< / a> < / li> < / ul> < / div> < / div> < / div> < / div>< / div>
解决方案
短回答
否。这是不可能与flexbox，或甚至CSS一般。
说明
Flex容器的初始设置为 align-items：stretch 。这会导致flex项展开横轴的完整长度。这是所谓的弹性等高列。
这里有几个注意事项：
-
等高高度列仅适用于弹性容器的子项。换句话说，flex项目必须具有相同的父项。
您的问题：
我想让所有
h2标题的行高度相同。这是否可能以某种方式？
不适用于CSS。因为
/ li>h2存在于不同的容器中，它们不是兄弟（他们更像是表兄弟），所以等高不适用。
-
flexbox中的等高列仅适用于一个flex行。通过包装创建的其他行上的项目建立自己相等的高度线。这意味着等高列不适用于多行弹性容器。 p>
-
align-self属性可用于单个flex项目，以覆盖align -
通过在弹性项目上指定高度（例如
height：300px），则覆盖align-items和align-self -
这篇文章专注于一个容器
flex-direction：row。如果容器是flex-direction：column，则等于高度变为等于宽度。这里有详细的评论：使弹性项目采用内容宽度，而不是父级宽度
相关：
I'm having a problem creating a flexbox responsive grid and was hoping that someone can point me to the right direction.
I want all the .block div's to be equal height, and the .bottom div absolutely positioned to the bottom. This is actually working in the current solution, but when the h2 heading is too long and reaches 2 lines, I want all the h2 headings of the row to be the same height.
Is this possible in some way?
I made a Codepen to illustrate the problem: http://codepen.io/kenvdbroek/pen/eZKdEQ
h1,
h2,
h3 {
margin: 0;
}
body {
margin: 0;
padding: 0;
}
ul.clean-list {
margin: 0;
padding: 0;
}
ul.clean-list li {
list-style: none;
margin-bottom: 5px;
}
li:last-child {
margin-bottom: 0;
}
.container {
padding-top: 50px;
}
.block {
margin-bottom: 30px;
border: 1px solid red;
}
.block > .bottom {
border: 1px solid blue;
}
@media only screen and (min-width: 480px) {
.row.row-flex-wrapper::before,
.row.row-flex-wrapper::after {
content: none !important;
}
.row.row-flex-wrapper::after {
clear: none;
}
.row.row-flex-wrapper {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
}
.row.row-flex-wrapper .column {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
float: none;
border: 1px solid orange;
}
.row.row-flex-wrapper .column > .block {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-direction: column;
-ms-flex-direction: column;
-webkit-flex-direction: column;
}
.row.row-flex-wrapper .column > .block > .block-list {
flex: 1 0 auto;
-ms-flex: 1 0 auto;
-webkit-flex: 1 0 auto;
}
.row.row-flex-wrapper .column > .block > h2 {}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
.container .row .column {
width: 50%;
}
}
<div class="container">
<div class="row row-flex-wrapper">
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title 1</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="/button">Some link</a>
</li>
<li><a href="/button">Some link 2</a>
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Another very long title which is actually toooo long...</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="/another-button">Another button</a>
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard dummy text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="/button">Very nice link</a>
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>This block is cool!</h2>
<div class="block-list">
<p>Some text here. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard dummy
text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="/button">Another link</a>
</li>
<li><a href="/button">Check this item</a>
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title Block</h2>
<div class="block-list">
<p>Go check out this item... Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer, Lorem Ipsum has been the industry's standard
dummy text...</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="/button">Button</a>
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Buttonssssss</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="#button">Button</a>
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="/button">Link to item</a>
</li>
<li><a href="/button">Link to item</a>
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="/button">Link to item</a>
</li>
</ul>
</div>
</div>
</div>
<div class="column col-sm-6 col-md-4">
<div class="block">
<h2>Another very very very very very very very long title</h2>
<div class="block-list">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently
with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<div class="bottom">
<ul class="clean-list">
<li><a href="/button">Button to item</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
解决方案
Short Answer
No. This is not possible with flexbox, or even CSS in general. You'll need JavaScript.
Explanation
An initial setting of a flex container is align-items: stretch. This causes flex items to expand the full length of the cross axis. This is what is known as "flex equal height columns".
Here are a few notes to keep in mind:
Equal height columns apply only to the children of a flex container. In other words, the flex items must have the same parent. Otherwise, the equal height feature doesn't apply.
Your question:
I want all the
h2headings of the row to be the same height. Is this possible in some way?Not with CSS. Because the
h2's exist in different containers, they aren't siblings (they're more like cousins), so equal heights don't apply.Equal height columns in flexbox apply only to one flex line. Items on other lines, created by wrapping, establish their own equal height line. This means that equal height columns do not work in a multi-line flex container.
The
align-selfproperty can be used on individual flex items to overridealign-items, which can break the equal height feature.By specifying a height on a flex item (e.g.
height: 300px), bothalign-itemsandalign-selfare overridden for that item, and the equal height setting is ignored.This post focuses on a container with
flex-direction: row. If the container isflex-direction: column, then equal height becomes equal width. Here's a detailed review: Make flex item take content width, not full width of parent
Related:
- Is it possible to have equal height columns in a multi-line flex container?
- How to disable equal height columns in Flexbox?
这篇关于不同flex容器中的flex项的等高列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
