html - 如何禁用 Flexbox 中的等高列？

Question

我尝试在布局中对齐三个元素。

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

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

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

有什么技巧可以不增加最高元素的 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

Answer 1

您遇到了 flex 等高列功能。

flex 容器的初始设置是align-items: stretch。

这意味着 flex 元素会自动扩展容器横轴的全长。在行向容器中，横轴是垂直的(高度)。

最高的元素设置所有 sibling 的高度。当最高的元素展开时，它的 sibling 也会随之展开。因此，所有元素的高度都相同。

要覆盖此默认设置，请将 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>

... 或 align-self: flex-start 到 flex 元素:

#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 设置align-self 的默认值。使用 align-self，您可以覆盖单个元素的默认值。

规范中的更多详细信息:

8.3. Cross-axis Alignment: the align-items and align-selfproperties

Flex items can be aligned in the cross axis of the current line of theflex container, similar to justify-content but in the perpendiculardirection.

align-items sets the default alignment for all of the flexcontainer’s items, including anonymous flex items.

align-self allows this default alignment to be overridden forindividual flex items.

---

一些历史

自 CSS 出现以来，有两个布局挑战经常令前端开发人员感到沮丧、困惑和恼火:

1. 如何使事物居中，尤其是垂直居中，以及
2. 如何创建等高的列(除了表格)

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

让事物居中从未如此简单:

#container {
    display: flex;
    justify-content: center;    /* center flex items along the main axis */
    align-items: center;        /* center flex items along the cross axis */
}

简单。简单的。高效的。 The craziness is over .

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

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

align-items: stretch 规则告诉 flex 元素尽可能沿横轴展开。因此，在行方向容器中，所有元素的高度都可以相同。 More craziness tamed by flexbox .

来自一个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 thismethod has some problems, e.g. anchor links won't work within yourlayout.

现在这是一个 hack!

钟摆现在开始向另一方向摆动:设计师正在询问如何关闭等高列。