如何在Flexbox中禁用等高列？

  • Z时代
  • 2024-01-10
  • 分类：问答

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

首先，我有一个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>

回答：

您遇到了flex等高列功能。

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

规格中的更多细节：

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

align-items 为所有flex容器的项目（包括匿名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规则告诉弹性项目尽可能沿横轴扩展。因此，在行方向容器中，所有项目的高度可以相等。

给overflow: hidden容器加上大（且相等）的负边距，并给列填充正数。请注意，此方法存在一些问题，例如锚链接在您的布局中不起作用。

现在是骇客！

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

以上是 如何在Flexbox中禁用等高列？ 的全部内容， 来源链接： utcz.com/qa/406961.html

回到顶部