如何在 Flexbox 中禁用等高列?

2022-01-30 00:00:00 html css flexbox

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

I have three elements I'm trying to align in my layout.

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

First, I have a div for feedback, and then a search input, and then a div element for suggestions.

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

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.

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

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(#feedback 和 #suggestions)有其中内容的高度?

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

#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

推荐答案

您遇到了 flex 等高列功能.

You're encountering the flex equal height columns feature.

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

An initial setting of a flex container is 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).

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

The tallest item sets the height for all siblings. As the tallest item expands, its siblings follow along. Hence, equal height for all items.

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

To override this default setting, add align-items: flex-start to the flex container:

#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 到弹性项目:

... or align-self: flex-start to the flex items:

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

align-items sets the default value of align-self. With align-self you can override the default on individual items.

规范中的更多细节:

8.3.跨轴对齐:align-items 和 align-self属性

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

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 设置所有 flex 的默认对齐方式容器的项目，包括匿名弹性项目.

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

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

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

一点历史

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

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:

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

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

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

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

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.

在等高列方面，flexbox 也很出色:默认情况下它会这样做.

In terms of equal height columns, flexbox also excels: It does this by default.

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

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

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

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

将 overflow: hidden 赋予容器和大(且相等)列的负边距和正填充.请注意，这方法有一些问题，例如锚链接不会在你的布局.

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.

现在这是一个技巧！

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

The pendulum is now beginning to swing the other way: Designers are asking how to TURN OFF equal height columns.

相关文章