如何让Flexbox（flex-grow）考虑内容大小？ [英] How to make Flexbox (flex-grow) take content into account for sizing?

问题描述

当两个元素都使用 flex-grow：1 时，我们如何让Flexbox停止在兄弟元素中均衡空间。这很难在前面解释，所以这里是代码快速跟随的问题的示例截图，以及所需的行为。

  .Parent {display：flex; flex-direction：column; background-color：lightcoral;宽度：400px;父> div {flex：1;}。child1 {background-color：lightblue;}。child2 {background-color：lightgreen;}  

< div class =child1> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Nullam在北欧精神病学杂志上发表。 Proin等分流行速度nec augue venenatis laoreet。 Etiam nec metus mi。 Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus。< / div> < DIV类= 的child2 > Lorem存有< / DIV>< / DIV>

问题：

注意每个div内容下的相等空间。

期望值：

在孩子们的div的内容很少，的div应该是相等的高度：

我怎么能得到这个行为？看来应该很容易使用Flexbox。

解决方案

flex-basis is你正在寻找的财产。 https://developer.mozilla.org/en-US/docs / web / CSS / flex-based

基于flex的CSS属性指定了flex基础，它是初始主要大小的一个弹性项目。这个属性决定了content-box的大小，除非使用box-sizing来指定。

默认情况下，flex会考虑计算 flex-grow 时元素中的内容 - 禁用它，只需指定 flex-basis：0

.Parent {display：flex; flex-direction：column; background-color：lightcoral;宽度：400px; min-height：200px;}父> div {flex-grow：1; child1 {background-color：lightblue;}。child2 {background-color：lightgreen;}

 < div class =Parent> < div class =child1> Lorem ipsum dolor sit amet，consectetur adipiscing elit。 Nullam在北欧精神病学杂志上发表的文章。 Proin等分流行速度nec augue venenatis laoreet。 Etiam nec metus mi。 Aliquam坐amet velit非lectus porttitor accumsan坐amet egestas risus。 Etiam nec metus mi。 Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus< / div> < DIV类= 的child2 > Lorem存有< / DIV>< / DIV>  

How can we get Flexbox to stop equalizing space in sibling elements when both of the elements are using flex-grow: 1. This is difficult to explain upfront, so here is the code quickly followed by example screenshots of the issue, and desired behavior.

.Parent {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  width: 400px;
  min-height: 200px;
}

.Parent>div {
  flex: 1;
}

.child1 {
  background-color: lightblue;
}

.child2 {
  background-color: lightgreen;
}

<div class="Parent">
  <div class="child1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sagittis lorem at odio euismod tincidunt. Proin aliquet velit nec augue venenatis laoreet. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus.</div>
  <div class="child2">Lorem ipsum</div>
</div>

The issue:

Notice the equal space under the content of each div.

Desired:

When there is little content in the children divs, the divs should be of equal height:

When one of the divs has a lot of content, I would expect the div with more content to only be as tall as the content (if it passes the original flex grow allotment).

How can I get this behavior? Seems it should be easy using Flexbox.

解决方案

flex-basis is the property you're looking for. https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

The flex-basis CSS property specifies the flex basis which is the initial main size of a flex item. This property determines the size of the content-box unless specified otherwise using box-sizing.

By default, flex will take into account the content in the element when computing flex-grow - to disable that, just specify flex-basis: 0

.Parent {
  display: flex;
  flex-direction: column;
  background-color: lightcoral;
  width: 400px;
  min-height: 200px;
}

.Parent>div {
  flex-grow: 1;
  flex-basis: 0;
}

.child1 {
  background-color: lightblue;
}

.child2 {
  background-color: lightgreen;
}

<div class="Parent">
  <div class="child1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sagittis lorem at odio euismod tincidunt. Proin aliquet velit nec augue venenatis laoreet. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus. Etiam nec metus mi. Aliquam sit amet velit non lectus porttitor accumsan sit amet egestas risus </div>
  <div class="child2">Lorem ipsum</div>
</div>

这篇关于如何让Flexbox（flex-grow）考虑内容大小？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！