如何在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-selfalign-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-itemsalign-self属性

有点历史

自从CSS开始以来,有两个布局挑战经常使前端开发人员感到沮丧,困惑和烦恼:

  1. 如何中心的东西,特别是垂直,和
  2. 如何创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 。 这是一个例子