Question

我有三个要素，我试图在布局中对齐。

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

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

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

有没有一个技巧可以不增加具有最高元素的div？只是让div（#feedback和#suggestions）具有内容的高度？

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

http://codepen.io/alucardu/pen/PPjRzY

Answer 1

您遇到了弹性相等高度列功能。

弹性容器的初始设置为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到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项目可以在当前行的交叉轴上对齐   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：

将overflow: hidden提供给容器并且大（等于）列的负边距和正填充。请注意这一点方法有一些问题，例如锚链接不适用于你的布局。

现在这是一个黑客！

钟摆现在开始以另一种方式摆动：设计师正在询问如何关闭相等高度的列。

Answer 2

您可以将align-items: flex-start添加到#container_add_movies。这是一个example

Answer 3

要在 bootstrap 4 中使用不相等的列，首先它需要知道它是如何使它与列的高度相等，所以原因是

align-items: stretch

要删除此属性，需要添加 align-items: flex-start 因此为此我添加了 class="align-items-start" 并且问题已解决，

Answer 4

将引起问题的子元素设置为flex:none对我来说很成功。

如何在Flexbox中禁用相等高度的列？

4 个答案:

一点历史