如何禁用 Flexbox 中的等高列?
[英] How to disable equal height columns in Flexbox?
本文介绍了如何禁用 Flexbox 中的等高列?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想在布局中对齐三个元素.
首先，我有一个用于反馈的 div，然后是一个搜索输入，然后是一个用于建议的 div 元素.
我希望第一个和最后一个元素的宽度为 20%，搜索输入的宽度为 60%.使用 Flexbox 可以实现我想要的.
但是有一个功能可以将所有 div 增长到最高元素.这意味着当搜索结果弹出时，反馈和建议元素随着搜索 div 的高度增长，导致布局混乱.
有没有不增加元素最高的 div 的技巧? 只需让 div(#feedback 和 #suggestions)具有其中内容的高度?
#container_add_movies {显示:弹性；}#container_add_movies #feedback {宽度:20%；背景颜色:绿色；}#container_add_movies #search {宽度:60%；背景颜色:红色；}#container_add_movies #suggestions {宽度:20%；背景颜色:黄色；}
<div id='反馈'>回馈
<div id='搜索'>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>
<div id='建议'>建议
http://codepen.io/alucardu/pen/PPjRzY
解决方案
您遇到了 flex 等高列功能.
弹性容器的初始设置是align-items:stretch.
这意味着 flex 项目会自动扩展容器横轴的全长.在行向容器中，横轴是垂直的(高度).
最高的项目设置所有兄弟姐妹的高度.随着最高的项目扩展，它的兄弟姐妹也跟着扩展.因此，所有项目的高度相同.
要覆盖此默认设置，请将 align-items: flex-start 添加到 flex 容器:
#container_add_movies {显示:弹性；对齐项目:flex-start；}
#container_add_movies {显示:弹性；对齐项目:flex-start；/* 新的 */}#container_add_movies #feedback {宽度:20%；背景颜色:绿色；显示:块；}#container_add_movies #search {宽度:60%；背景颜色:红色；}#container_add_movies #suggestions {宽度:20%；背景颜色:黄色；}
<div id='反馈'>反馈</div><div id='搜索'>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>
<div id='suggestions'>建议</div>
... 或 align-self: flex-start 到弹性项目:
#feedback {align-self: flex-start;宽度:20%；背景颜色:绿色；}#建议{align-self: flex-start;宽度:20%；背景颜色:黄色；}
#container_add_movies {显示:弹性；}#container_add_movies #search {宽度:60%；背景颜色:红色；}#回馈 {align-self: flex-start;/* 新的 */宽度:20%；背景颜色:绿色；}#建议{align-self: flex-start;/* 新的 */宽度:20%；背景颜色:黄色；}
<div id='反馈'>反馈</div><div id='搜索'>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>搜索<br>
<div id='suggestions'>建议</div>
align-items 设置align-self 的默认值.使用 align-self，您可以覆盖单个项目的默认值.
规范中的更多细节:
<块引用>
8.3.跨轴对齐:align-items 和 align-self属性
Flex 项目可以在当前行的横轴上对齐flex 容器，类似于 justify-content 但垂直方向.
align-items 设置所有 flex 的默认对齐方式容器的项目，包括匿名弹性项目.
align-self 允许覆盖这个默认对齐单个弹性项目.
一点历史
自从 CSS 诞生以来，就有两个布局挑战经常让前端开发人员感到沮丧、困惑和恼火:
- 如何使事物居中，尤其是垂直居中，以及
- 如何创建等高的列(表格放在一边)
今天，随着 flexbox 的出现，这些问题都解决了.
居中从未如此简单:
#container {显示:弹性；对齐内容:居中；/* 沿主轴居中 flex 项目 */对齐项目:居中；/* 沿横轴居中 flex 项目 */}
简单.简单.高效的.疯狂结束.
就等高列而言，flexbox 也很出色:它默认是这样做的.
#container {显示:弹性；弹性方向:行；/* 甚至没有必要；默认规则 */对齐项目:拉伸；/* 甚至没有必要；默认规则 */}
align-items:stretch 规则告诉 flex 项目尽可能地沿横轴展开.因此，在行方向容器中，所有项目的高度都可以相同.Flexbox 驯服了更多的疯狂.
来自一个等高列的流行答案:
<块引用>
将 overflow: hidden 赋予容器和大(和相等)列的负边距和正填充.请注意，这方法有一些问题，例如锚链接将无法在您的布局.
现在这是一个黑客！
钟摆现在开始以另一种方式摆动:设计师正在询问如何关闭等高的柱子.
I have three elements I'm trying to align in my layout.
First, I have a div for feedback, and then a search input, and then a div element for suggestions.
I want the first and last element to have a width of 20%, and the search input to have a width of 60%. Using Flexbox I achieve what I want.
But there's a feature that grows all the divs to the highest element. This means that when search results pop up, the feedback and suggestion elements grow in height with the search div resulting in a messed up layout.
Is there a trick to not grow the divs with the highest element? Just make the divs (#feedback and #suggestions) have the height of the content in them?
#container_add_movies {
display: flex;
}
#container_add_movies #feedback {
width: 20%;
background-color: green;
}
#container_add_movies #search {
width: 60%;
background-color: red;
}
#container_add_movies #suggestions {
width: 20%;
background-color: yellow;
}
<div id='container_add_movies'>
<div id='feedback'>
Feedback
</div>
<div id='search'>
Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>Search
<br>
</div>
<div id='suggestions'>
Suggestions
</div>
</div>
http://codepen.io/alucardu/pen/PPjRzY
解决方案
You're encountering the flex equal height columns feature.
An initial setting of a flex container is align-items: stretch.
This means that flex items automatically expand the full length of the cross axis of the container. In a row-direction container, the cross axis is vertical (height).
The tallest item sets the height for all siblings. As the tallest item expands, its siblings follow along. Hence, equal height for all items.
To override this default setting, add align-items: flex-start to the flex container:
#container_add_movies {
display: flex;
align-items: flex-start;
}
#container_add_movies {
display: flex;
align-items: flex-start; /* NEW */
}
#container_add_movies #feedback {
width: 20%;
background-color: green;
display: block;
}
#container_add_movies #search {
width: 60%;
background-color: red;
}
#container_add_movies #suggestions {
width: 20%;
background-color: yellow;
}
<div id='container_add_movies'>
<div id='feedback'>Feedback</div>
<div id='search'>
Search<br>Search<br>Search<br>Search<br>Search<br> Search
<br>Search<br>Search<br>Search<br>Search<br>
</div>
<div id='suggestions'>Suggestions</div>
</div>
... or align-self: flex-start to the flex items:
#feedback {
align-self: flex-start;
width: 20%;
background-color: green;
}
#suggestions {
align-self: flex-start;
width: 20%;
background-color: yellow;
}
#container_add_movies {
display: flex;
}
#container_add_movies #search {
width: 60%;
background-color: red;
}
#feedback {
align-self: flex-start; /* NEW */
width: 20%;
background-color: green;
}
#suggestions {
align-self: flex-start; /* NEW */
width: 20%;
background-color: yellow;
}
<div id='container_add_movies'>
<div id='feedback'>Feedback</div>
<div id='search'>
Search<br>Search<br>Search<br>Search<br>Search<br> Search
<br>Search<br>Search<br>Search<br>Search<br>
</div>
<div id='suggestions'>Suggestions</div>
</div>
align-items sets the default value of align-self. With align-self you can override the default on individual items.
More details in the spec:
8.3. Cross-axis Alignment: the align-items and align-self
properties
Flex items can be aligned in the cross axis of the current line of the
flex container, similar to justify-content but in the perpendicular
direction.
align-items sets the default alignment for all of the flex
container’s items, including anonymous flex items.
align-self allows this default alignment to be overridden for
individual flex items.
A bit of history
Since the beginnings of CSS, there have been two layout challenges that have regularly frustrated, perplexed, and annoyed front-end developers:
- How to center things, especially vertically, and
- How to create equal height columns (tables aside)
Today, with the advent of flexbox, these problems are over.
Centering things has never been easier:
#container {
display: flex;
justify-content: center; /* center flex items along the main axis */
align-items: center; /* center flex items along the cross axis */
}
Simple. Easy. Efficient. The craziness is over.
In terms of equal height columns, flexbox also excels: It does this by default.
#container {
display: flex;
flex-direction: row; /* not even necessary; default rule */
align-items: stretch; /* not even necessary; default rule */
}
The align-items: stretch rule tells flex items to expand along the cross-axis as much as possible. Hence, in a row-direction container all items can be equal height. More craziness tamed by flexbox.
From one popular answer for equal height columns:
Give overflow: hidden to the container and large (and equal)
negative margin and positive padding to columns. Note that this
method has some problems, e.g. anchor links won't work within your
layout.
Now that's a hack!
The pendulum is now beginning to swing the other way: Designers are asking how to TURN OFF equal height columns.
这篇关于如何禁用 Flexbox 中的等高列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
