如何在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容器的初始设置是align-items: stretch.

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

最高的项目设置所有兄弟姐妹的高度.随着最高的项目扩大,其兄弟姐妹也随之而来.因此,所有物品的高度相等.

要覆盖此默认设置,请添加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你可以覆盖各个项目的默认.

规范中的更多细节:

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

柔性物品可以在柔性容器的当前线的交叉轴上对齐,类似于justify-content但是在垂直方向上.

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

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 */
}

简单.简单.高效.疯狂结束了.

就高度相等的列而言,flexbox也很出色:默认情况下这样做.

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

该align-items: stretch规则告诉柔性物品沿十字轴尽可能地扩大.因此,在行方向容器中,所有项目的高度可以相等.更多由flexbox驯服的疯狂.

从一个相同高度列的流行答案:

给overflow: hidden容器和大的(和相等的)负边距和正填充到列.请注意,此方法存在一些问题,例如锚点链接在布局中不起作用.

现在这是一个黑客!

摆锤现在开始以另一种方式摆动:设计师正在询问如何关闭相同高度的柱子.

Answer 2

你可以添加align-items: flex-start到你的#container_add_movies.这是一个例子