Html 如何在 Flexbox 中禁用等高列？

How to disable equal height columns in Flexbox?

提问by Peter Boomsma

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.

首先，我有一个用于反馈的 div，然后是一个搜索输入，然后是一个用于建议的 div 元素。

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.

我希望第一个和最后一个元素的宽度为 20%，搜索输入的宽度为 60%。使用 Flexbox 我实现了我想要的。

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.

但是有一个功能可以将所有 div 增长到最高元素。这意味着当搜索结果弹出时，反馈和建议元素随着搜索 div 的高度增加，导致布局混乱。

Is there a trick to not grow the divs with the highest element?Just make the divs (#feedbackand #suggestions) have the height of the content in them?

有没有不增加元素最高的 div 的技巧？只是让 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>

http://codepen.io/alucardu/pen/PPjRzY

http://codepen.io/alucardu/pen/PPjRzY

回答by Michael Benjamin

You're encountering the flex equal height columns feature.

您遇到了 flex 等高列功能。

An initial setting of a flex container is align-items: stretch.

flex 容器的初始设置是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).

这意味着 flex 项目会自动扩展容器横轴的全长。在行方向容器中，横轴是垂直的（高度）。

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-startto the flex container:

要覆盖此默认设置，请添加align-items: flex-start到 flex 容器：

#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-startto the flex items:

...或align-self: flex-start弹性项目：

#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-itemssets the default value of align-self. With align-selfyou can override the default on individual items.

align-items设置默认值align-self。有了align-self你可以覆盖各个项目的默认。

More details in the spec:

规范中的更多详细信息：

8.3. Cross-axis Alignment: the align-itemsand align-selfproperties

Flex items can be aligned in the cross axis of the current line of the flex container, similar to justify-contentbut in the perpendicular direction.

align-itemssets the default alignment for all of the flex container's items, including anonymous flex items.

align-selfallows this default alignment to be overridden for individual flex items.

8.3. 横轴对齐：align-items和align-self属性

Flex 项目可以在 flex 容器当前行的交叉轴上对齐，类似于justify-content但在垂直方向上。

align-items设置所有弹性容器项目的默认对齐方式，包括匿名弹性项目。

align-self允许为单个 flex 项目覆盖此默认对齐方式。

---

---

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:

自 CSS 诞生以来，就有两个布局挑战经常让前端开发人员感到沮丧、困惑和恼火：

1. How to center things, especially vertically, and
2. How to create equal height columns (tables aside)

1. 如何使事物居中，尤其是垂直居中，以及
2. 如何创建等高的列（表格放在一边）

Today, with the advent of flexbox, these problems are over.

今天，随着 flexbox 的出现，这些问题都解决了。

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.

在等高列方面，flexbox 也很出色：它默认这样做。

#container {
    display: flex;
    flex-direction: row;        /* not even necessary; default rule */
    align-items: stretch;       /* not even necessary; default rule */
}

The align-items: stretchrule 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.

该align-items: stretch规则告诉 flex 项目尽可能地沿横轴展开。因此，在行方向容器中，所有项目的高度都可以相同。更多的疯狂被 flexbox 驯服了。

From one popular answer for equal height columns:

来自对等高列的一个流行答案：

Give overflow: hiddento 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.

给overflow: hidden容器和大的（和相等的）负边距和列的正填充。请注意，此方法有一些问题，例如锚链接在您的布局中不起作用。

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.

钟摆现在开始以另一种方式摆动：设计师正在询问如何关闭等高的柱子。

回答by Sergey Tyupaev

You can add align-items: flex-startto your #container_add_movies. Here's an example

您可以添加align-items: flex-start到您的#container_add_movies. 这是一个例子

回答by Cozmoz

Setting the child element that was causing the problem to flex:nonedid the trick for me.

设置导致问题的子元素flex:none对我有用。