logo标签列表

如何在Flexbox中禁用等高列？

htmlcssflexbox
98

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

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

4个回答
195

您正在遇到“flex等高列”功能。

flex容器的初始设置为align-items: stretch。

这意味着flex项目自动扩展容器的交叉轴的整个长度。在行方向容器中，交叉轴是垂直的（高度）。

最高的项目设置所有兄弟节点的高度。随着最高的项目扩展，其兄弟节点也跟随扩展。因此，所有项目具有相等的高度。

要覆盖此默认设置，请向flex容器添加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将其应用到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. 交叉轴对齐: align-items和align-self 属性

Flex项目可以在当前行的交叉轴上对齐，类似于justify-content，但是在垂直方向上。

align-items为所有flex容器的项目（包括匿名flex项目）设置了默认对齐方式。

align-self允许覆盖单个 flex 项目的默认对齐方式。

一点历史

自 CSS 开始以来，一直存在两个排版问题经常困扰、使前端开发人员感到困惑和烦恼:

  1. 如何居中，特别是在垂直方向上；
  2. 如何创建等高列（除表格之外）。

现在，通过使用弹性盒布局，这些问题可以迎刃而解。

居中元素从未如此简单:

#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属性，并对列添加大的（和相等的）负边距和正填充。请注意，此方法存在一些问题，例如锚定链接将无法在布局内工作。

现在这是个技巧！
钟摆现在开始向另一个方向摆动：设计师们正要求如何关闭等高列。
1
你是一个英雄... - aspiringsoftwaredev
22
你可以将 #container_add_movies 添加 align-items: flex-start。 这是一个示例。
2
为了在Bootstrap 4中实现不同宽度的列，首先需要了解如何使列高度相等，原因是：
align-items: stretch

要删除这个属性，需要添加align-items: flex-start，因此我添加了class="align-items-start"类，问题得到解决。

1

对我来说，将导致问题的子元素设置为flex:none就解决了问题。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接