如何在Flexbox中禁用相同高度的列？
我有三个元素，我试图在我的布局alignment。
首先，我有一个div的反馈，然后一个searchinput，然后一个div元素的build议。
我希望第一个和最后一个元素的宽度为20％，searchinput的宽度为60％。 使用Flexbox我达到了我想要的。
但是，有一个function，所有的divs最高的元素 。 这意味着当search结果popup时，反馈和build议元素与searchdiv一起增长，导致布局混乱。
有没有一个诀窍，不发展最高元素的divs？ 只要使div（ #feedback和#suggestions ）有他们的内容的高度？
#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>
简答
有一个简单的解决scheme：添加align-items: flex-start到flex容器。
#container_add_movies { display: flex; align-items: flex-start; }
这将覆盖所有弹性项目的默认align-items: stretch 。
修改Codepen
替代scheme
假设您希望大多数项目共享相同的高度，但只有less数项目具有内容高度。
在这种情况下，您可以保持align-items: stretch默认值，但使用align-self属性。
align-self与align-items类似，但align-self适用于flex项目， align-items适用于flex容器。 align-self属性将覆盖单个项目的align-items项目。
所以你可以做这样的事情：
#feedback { align-self: flex-start; /* NEW */ width: 20%; background-color: green; } #suggestions { align-self: flex-start; /* NEW */ width: 20%; background-color: yellow; }
修改Codepen
有关更多详情，请参阅规范：
- 8.3。 交叉轴alignment：
align-items和align-self属性
有点历史
自从CSS开始以来，有两个布局挑战经常使前端开发人员感到沮丧，困惑和烦恼：
- 如何中心的东西，特别是垂直，和
- 如何创build同等高度的列（表格放在一边）
今天，随着flexbox的问世，这些问题已经结束。
集中事情从未如此简单：
#container { display: flex; justify-content: center; /* center flex items along the main axis */ align-items: center; /* center flex items along the cross axis */ }
简单。 简单。 高效。 疯狂已经结束了 。
在高度相等的栏目中，flexbox也很出色：默认情况下是这样。
#container { display: flex; flex-direction: row; /* not even necessary; default rule */ align-items: stretch; /* not even necessary; default rule */ }
align-items: stretch规则告诉flex项目尽可能沿横轴扩展。 因此，在行方向容器中，所有项目可以是相等的高度。 更多由flexbox驯服的疯狂 。
从同等高度的栏目的一个普遍的答复 ：
给
overflow: hidden到容器和大（和相等）的负余量和积极的填充列。 请注意，这种方法有一些问题，例如锚链接将无法在您的布局。
现在这是一个黑客！
钟摆现在开始摆动： devise师正在问如何关掉等高柱。
您可以添加align-items: flex-start到您的#container_add_movies 。 这是一个例子
