Css 如何在 Flexbox 中禁用等高列

您遇到的是弹性等高列功能.

弹性容器的初始设置为align-items: stretch.

这意味着弹性项目会自动扩展容器横轴的全长.在行方向容器中，横轴是垂直的(高度).

最高的项设置所有同级项的高度.当最高的项目扩大时，它的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至弹性物品:

#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，您可以覆盖单个项目的默认设置.

More details in the spec:个

8.3. Cross-axis Alignment: the align-items and align-self properties个

弹性项目可以在当前行的横轴上对齐

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

align-self允许将此默认对齐方式替换为

一点历史

自从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:

将overflow: hidden分配给容器和大的(且相等) 列的负边距和正填充.请注意，这一点 方法有一些问题，例如锚定链接在您的 布局.

这才是黑客攻击！

钟摆现在开始向另一个方向摆动:Designers are asking how to TURN OFF equal height columns.