如何在 Flexbox 中禁用等高列？

Posted 2023-03-05

技术标签:

【中文标题】如何在 Flexbox 中禁用等高列？【英文标题】：How to disable equal height columns in Flexbox? 【发布时间】：2016-01-07 04:32:54 【问题描述】：

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

首先，我有一个用于反馈的 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

【问题讨论】：

【参考方案1】：

您遇到了 flex 等高列功能。

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

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

最高的项目设置所有兄弟姐妹的高度。随着最高的项目扩大，它的兄弟姐妹也随之而来。因此，所有项目的高度相同。

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

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

规范中的更多细节：

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

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

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

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

一点历史

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

如何使事物居中，尤其是垂直居中，以及如何创建等高的列（除了表格）

今天，随着 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：