弹性项目的等高子项
[英] Equal height children of flex items
本文介绍了弹性项目的等高子项的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在创建 flexbox 响应式网格时遇到问题，希望有人能指出我正确的方向.
我希望所有 .block div 的高度相等，并且 .bottom div 绝对位于底部.这实际上在当前解决方案中有效，但是当 h2 标题太长并达到 2 行时，我想要所有 h2 标题行高度相同.
这在某种程度上可能吗?
我做了一个 Codepen 来说明这个问题:http://codepen.io/kenvdbroek/pen/eZKdEQ
h1,h2,h3{边距:0；}身体 {边距:0；填充:0；}ul.clean-list {边距:0；填充:0；}ul.clean-list li {列表样式:无；底边距:5px；}李:最后一个孩子{底边距:0；}.容器 {填充顶部:50px；}.堵塞 {底边距:30px；边框:1px纯红色；}.block >.底部 {边框:1px纯蓝色；}@media only screen and (min-width: 480px) {.row.row-flex-wrapper::before,.row.row-flex-wrapper::after {内容:无！重要；}.row.row-flex-wrapper::after {明确:无；}.row.row-flex-wrapper {显示:-webkit-flex；显示:-ms-flexbox；显示:弹性；flex-wrap: 包裹;-webkit-flex-wrap:包裹；-ms-flex-wrap:包裹；}.row.row-flex-wrapper .column {显示:-webkit-flex；显示:-ms-flexbox；显示:弹性；浮动:无；边框:1px纯橙色；}.row.row-flex-wrapper .column >.堵塞 {显示:-webkit-flex；显示:-ms-flexbox；显示:弹性；弹性方向:列；-ms-flex-direction: 列；-webkit-flex-direction: 列；}.row.row-flex-wrapper .column >.block >.黑名单 {弹性:1 0 自动；-ms-flex:1 0 自动；-webkit-flex:1 0 自动；}.row.row-flex-wrapper .column >.block >h2{}}@media only screen and (min-width: 480px) and (max-width: 767px) {.container .row .column {宽度:50%；}}
<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 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近使用像 Aldus PageMaker 这样的桌面出版软件，包括 Lorem Ipsum 的版本.</p>
<div class="bottom"><ul class="clean-list"><li><a href="/button">一些链接</a><li><a href="/button">一些链接2</a>
<div class="column col-sm-6 col-md-4"><div class="block"><h2>另一个很长的标题实际上太长了...</h2><div class="block-list"><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时未知的打印机...</p>
<div class="bottom"><ul class="clean-list"><li><a href="/another-button">另一个按钮</a>
<div class="column col-sm-6 col-md-4"><div class="block"><h2>标题</h2><div class="block-list"><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时未知的打印机，Lorem Ipsum 一直是行业标准的虚拟文本...</p>
<div class="bottom"><ul class="clean-list"><li><a href="/button">非常好的链接</a>
<div class="column col-sm-6 col-md-4"><div class="block"><h2>这个方块很酷！</h2><div class="block-list"><p>这里有一些文字.Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当一个未知的打印机时，Lorem Ipsum 一直是行业的标准虚拟文本文本...</p>
<div class="bottom"><ul class="clean-list"><li><a href="/button">另一个链接</a><li><a href="/button">勾选此项</a>
<div class="column col-sm-6 col-md-4"><div class="block"><h2>标题块</h2><div class="block-list"><p>去看看这个项目... Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当一个未知的打印机时，Lorem Ipsum 一直是行业标准虚拟文本...</p>
<div class="bottom"><ul class="clean-list"><li><a href="/button">按钮</a>
<div class="column col-sm-6 col-md-4"><div class="block"><h2>Buttonssssss</h2><div class="block-list"><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近使用像 Aldus PageMaker 这样的桌面出版软件，包括 Lorem Ipsum 的版本.</p>
<div class="bottom"><ul class="clean-list"><li><a href="#button">Button</a>
<div class="column col-sm-6 col-md-4"><div class="block"><h2>标题</h2><div class="block-list"><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.</p>
<div class="bottom"><ul class="clean-list"><li><a href="/button">项目链接</a><li><a href="/button">项目链接</a>
<div class="column col-sm-6 col-md-4"><div class="block"><h2>标题</h2><div class="block-list"><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近使用像 Aldus PageMaker 这样的桌面出版软件，包括 Lorem Ipsum 的版本.</p>
<div class="bottom"><ul class="clean-list"><li><a href="/button">项目链接</a>
<div class="column col-sm-6 col-md-4"><div class="block"><h2>另一个非常非常非常非常非常长的标题</h2><div class="block-list"><p>Lorem Ipsum 只是印刷和排版行业的虚拟文本.自 1500 年代以来，Lorem Ipsum 一直是行业标准的虚拟文本，当时一位不知名的印刷商使用了一个类型的厨房，并争先恐后地制作了一本类型样本书.它不仅存活了五个世纪，而且还经历了电子排版的飞跃，基本保持不变.它在 1960 年代随着包含 Lorem Ipsum 段落的 Letraset 表的发布而流行，最近使用像 Aldus PageMaker 这样的桌面出版软件，包括 Lorem Ipsum 的版本.</p>
<div class="bottom"><ul class="clean-list"><li><a href="/button">按钮到项目</a>
解决方案
这在 flexbox 或 CSS 中通常是不可能的.
弹性容器的初始设置是align-items:stretch.这会导致弹性项目扩展横轴的全长.这就是所谓的伸缩等高列".
以下是一些需要牢记的注意事项:
- 等高列仅适用于弹性容器的子项.换句话说，弹性项目必须具有相同的父项.否则，等高功能将不适用.
您的问题:
<块引用>我希望该行的所有 h2 标题高度相同.这在某种程度上可能吗?
不使用 CSS.因为 h2 存在于不同的容器中，所以它们不是兄弟(它们更像是堂兄弟)，所以不适用相等的高度.
flexbox 中的等高列仅适用于一个 flex line.通过环绕创建的其他行上的项目建立自己的等高线.这意味着等高列在多行弹性容器中不起作用.>
align-self 属性可用于单个 flex 项目以覆盖 align-items，这会破坏等高特性.
通过在 flex 项目上指定高度(例如 height: 300px)，align-items 和 align-self为该项目覆盖，并忽略等高设置.
这篇文章重点介绍了一个带有 flex-direction: row 的容器.如果容器是flex-direction: column，那么等高就变成了等宽.这里有一个详细的评论:让 flex 项目采用内容宽度，而不是父容器的宽度
更多详情:
重复帖子:
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>
解决方案
This is not possible with flexbox or CSS, in general.
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 h2 headings 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-self property can be used on individual flex items to override align-items, which can break the equal height feature.
By specifying a height on a flex item (e.g. height: 300px), both align-items and align-self are overridden for that item, and the equal height setting is ignored.
This post focuses on a container with flex-direction: row. If the container is flex-direction: column, then equal height becomes equal width. Here's a detailed review: Make flex items take content width, not width of parent container
More details:
Duplicate posts:
这篇关于弹性项目的等高子项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
