内容包装在列中时，Flex容器不会展开 [英] Flex container doesn't expand when contents wrap in a column

问题描述

我有一个flex容器（一个< ul> ），其子组设置为换行。我的问题是，一旦儿童包装，柔性容器的背景不会延伸覆盖这些包装的儿童。这是一个 codepen 问题。

以下是笔的代码：

ul {position：absolute;显示：flex;弯曲流动：列包装;身高：8em; / *强制包装* / background-color：＃999; list-style：none;填充：0; margin：0;} li {width：3em; text-align：center;}

< ul> <李→1< /锂> <李→2< /锂> <李→3< /锂> <李→4< /锂> <李→5< /锂> <李→6< /锂> <李大于7< /锂> <李> 8 LT; /锂> <李> 9< /锂> <李大于10< /锂> <李> 11< /锂> <李> 12< /锂> < li> 13< / li>< / ul>

>编辑：



在我真正的用例中，我不知道flex容器有多高或多少个孩子会有，所以它会在不同点包装。

解决方案

您正在设置 display：flex ，但不能在孩子上设置弹性值。而不是 width：3em ，它应该像 flex：1 ，这取决于你想要达到的目标。使用 display：flex ，但是在 em 中定义宽度是没有意义的。

编辑：不知道为什么这是downvoted，downvoter澄清？在问题中的问题将通过正确使用定位来解决（例如，使用 flex 值而不是设置 width ）。

I have a flex-container (a <ul>) with its children set to wrap in a column. The issue I have is that once the children wrap, the background of the flex-container doesn't extend to cover these wrapped children. Here's a codepen of the issue.

Here is the code from the pen:

ul {
  position: absolute;
  display: flex;
  flex-flow: column wrap;
  height: 8em;
  /*to force wrapping*/
  background-color: #999;
  list-style: none;
  padding: 0;
  margin: 0;
}
li {
  width: 3em;
  text-align: center;
}

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
  <li>6</li>
  <li>7</li>
  <li>8</li>
  <li>9</li>
  <li>10</li>
  <li>11</li>
  <li>12</li>
  <li>13</li>
</ul>

Edit:

In my real use-case, I don't know how tall the flex-container will be or how many children it will have, so it will wrap at different points.

解决方案

You're setting display: flex but not setting a flex value on the children. Instead of width: 3em, it should be something like flex: 1, depending on what you're trying to achieve. Using display: flex but then defining a width in em doesn't make sense.

Edit: Not sure why it was downvoted, can the downvoter clarify? The problem in the question would be resolved with proper use of positioning (e.g. use a flex value instead of setting a width).

这篇关于内容包装在列中时，Flex容器不会展开的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！