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-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.

---

一些历史

自 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 this method has some problems, e.g. anchor links won't work within your layout.

现在这是一个 hack!

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