问题：

如何保持包装的灵活项目与前一行的元素宽度相同？

公羊俭

2023-03-14

我有一个

我正在尝试获取

有没有办法告诉flexbox在包装后保持物品的宽度，同时保持灵活的宽度？

包装演示：

我的代码如下所示：

<ul>
  <li>
    <figure>
      <img src="http://placekitten.com/g/250/250">
    </figure>
  </li>
  <li>
    <figure>
      <img src="http://placekitten.com/g/100/100">
    </figure>
  </li>
  <!-- ... -->
</ul>

和CSS：

ul {
  display: flex;
  flex-wrap: wrap;
}

  li {
    min-width: 40px;
    max-width: 100px;
    flex: 1 0 0;
  }

这里有一个关于coDepen的实时示例，带有一些额外的注释，调整您的窗口以查看它的包装。

共有3个答案

夹谷浩宕

2023-03-14

我一直在试验你的codepen，我设置了flex:0 1 10%

当然，你可以随心所欲地设置flex basis，我只是想证明这一点，如果你设置flex basis并允许它收缩，在这种情况下，它会表现得更好。

我想这就是你需要的。这是预览：http://codepen.io/anon/pen/bwqNEZ

干杯

晋安国

2023-03-14

这不是你想要的答案，但使用起来很好：

display: grid;
grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));

https://codepen.io/omergal/pen/povzJrz

ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
}

li {
  min-width: 40px;
  max-width: 100px;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}
ul {
  background-color: tomato;
}

li {
  margin: 0.5em;
  background-color: darkgreen;
}

img {
  width: 100%;
  opacity: 0.5;
}
figure,
img {
  margin: 0;
  padding: 0;
}

<ul>
      <li>
        <figure>
          <img src="http://placekitten.com/g/250/250">
        </figure>
      </li>
      <li>
        <figure>
          <img src="http://placekitten.com/g/101/101">
        </figure>
      </li>
      <li>
        <figure>
          <img src="http://placekitten.com/g/201/201">
        </figure>
      </li>
      <li>
        <figure>
          <img src="http://placekitten.com/g/150/150">
        </figure>
      </li>
      <li>
        <figure>
          <img src="http://placekitten.com/g/80/80">
        </figure>
      </li>
      <li>
        <figure>
          <img src="http://placekitten.com/g/111/111">
        </figure>
      </li>
      <li>
        <figure>
          <img src="http://placekitten.com/g/40/40">
        </figure>
      </li>
      <li>
        <figure>
          <img src="http://placekitten.com/g/110/110">
        </figure>
      </li>
      <li>
        <figure>
          <img src="http://placekitten.com/g/75/75">
        </figure>
      </li>
      <li>
        <figure>
          <img src="http://placekitten.com/g/89/89">
        </figure>
      </li>
      <li>
        <figure>
          <img src="http://placekitten.com/g/150/150">
        </figure>
      </li>
      <li>
        <figure>
          <img src="http://placekitten.com/g/32/32">
        </figure>
      </li>
      <li>
        <figure>
          <img src="http://placekitten.com/g/61/61">
        </figure>
      </li>
      <li>
        <figure>
          <img src="http://placekitten.com/g/320/320">
        </figure>
      </li>
    </ul>

王宏深

2023-03-14

这不是我所说的解决方案本身，但它是一个相当优雅的解决方案，只使用媒体查询，更重要的是不使用JavaScript！

@mixin flex-wrap-fix($flex-basis, $max-viewport-width: 2000px) {
  flex-grow: 1;
  flex-basis: $flex-basis;
  max-width: 100%;

  $multiplier: 1;
  $current-width: 0px;

  @while $current-width < $max-viewport-width {
    $current-width: $current-width + $flex-basis;
    $multiplier: $multiplier + 1;

    @media(min-width: $flex-basis * $multiplier) {
      max-width: percentage(1/$multiplier);
    }
  }
}

将混合应用到您的flex项目：

.flex-item {
  @include flex-wrap-fix(100px)
}

只要你的flex容器宽度与视口大小匹配，上面的混合就可以做到，就像OP的例子一样。否则，媒体查询不会帮助您，因为它们总是基于视口宽度。但是，您可以使用css-etent-Query库及其元素查询来代替浏览器媒体查询。下面是一个可以应用于flex容器的混合代码：

@mixin flex-container-wrap-items($flex-basis, $max-expected-width: 2000px) {
  display: flex;
  flex-wrap: wrap;

  > * {
    max-width: 100%;
    flex-grow: 1;
    flex-basis: $flex-basis;
  }

  $multiplier: 1;
  $current-width: 0px;

  @while $current-width < $max-expected-width {
    $current-width: $current-width + $flex-basis;
    $multiplier: $multiplier + 1;

    &[min-width~="#{$flex-basis * $multiplier}"] > * {
      max-width: percentage(1/$multiplier);
    }
  }
}

比方说，根据OP的示例，我们希望每个项目的最大宽度为100px，因此我们知道对于100px的浏览器宽度，我们可以每行容纳一个项目，依此类推：

| Viewport Width | Max Item Count Per Row | Item Width (min-max) |
|----------------|------------------------|----------------------|
| <= 100         | 1                      | 0px - 100px          |
| <= 200         | 2                      | 50px - 100px         |
| <= 300         | 3                      | 50px - 100px         |
| <= 400         | 4                      | 50px - 100px         |
| <= 500         | 5                      | 50px - 100px         |
| <= 600         | 6                      | 50px - 100px         |

我们可以编写媒体查询来创建以下规则：

| Viewport Width | Max Item Count Per Row | Item Max Width | Calculation |
|------------------------------------------------------------------------|
| <= 100px       | 1                      | 100%           | (100/1)     |
| <= 200px       | 2                      | 50%            | (100/2)     |
| <= 300px       | 3                      | 33.33333%      | (100/3)     |
| <= 400px       | 4                      | 25%            | (100/4)     |
| <= 500px       | 5                      | 20%            | (100/5)     |
| <= 600px       | 6                      | 16.66666%      | (100/6)     |

这样地：

li {
  flex: 1 0 0
  max-width: 100%;
}

@media(min-width: 200px) {
  li { max-width: 50%; }
}

@media(min-width: 300px) {
  li { max-width: 33.33333%; }
}

@media(min-width: 400px) {
  li { max-width: 25%; }
}

@media(min-width: 500px) {
  li { max-width: 20%; }
}

@media(min-width: 600px) {
  li { max-width: 16.66666%; }
}

当然，这是重复的，但很可能您正在使用某种预处理器，它可以为您处理重复性。这正是上面TL中的mixin的意思；科室医生。

我们现在要做的就是指定100px作为我们的flex基础，以及可选的最大浏览器窗口宽度（默认为2000px）来创建媒体查询：

@include flex-wrap-fix(100px)

最后，使用上面的混音，获得具有所需输出的原始CodePen示例的分叉版本：

http://codepen.io/anon/pen/aNVzoJ

类似资料：

灵活元素保持行为自动宽度（收缩与内容）是可能的？[重复]

我不想"第二"div占用100%。我想保持它像"inline-block"的宽度应该延长，直到内容可用。提前谢谢
如何使多行跨度与内容保持相同的宽度？[副本]

我有一个div里面有2个跨度。如果第一个跨距内容足够短，可以在单行上显示，则跨距宽度（在开发工具中）与文本内容的宽度相同。将第二个跨距直接定位在第一个跨距的右侧。如果第一个跨距的内容足够长，可以使其环绕跨距的宽度，则该跨距的宽度将大于内容的宽度。这意味着在换行的文本后面有多余的空格。它强制第二个跨距与父div的右边框对齐，并强制第一个跨距的宽度获得剩余的宽度。是否有一种方法可以使多行跨度的宽度
灵活对齐项不工作与灵活包装？[重复]

我有时觉得Flex太复杂了。演示：https://jsfiddle.net/304xhguw/ 我试图创建一个容器，它的末尾有多行文本：使用Flex应该很容易，对吧？完成后，容器使用flex，在末尾对齐项，并且h1由于的和而创建新行。完美。不是真的：等等，刚才发生了什么事<代码> 不用担心，有一些惊人的特性应该可以工作，让我们试试：
Android RecyclerView GridLayoutManager将项目居中并保持相同宽度

我使用布局管理器将此配置为：我的具体情况是子项没有预定义的宽度。相反，我将它们的宽度设置为然后我希望为每个项目提供1/3的可用空间。到目前为止很好，但我希望，如果在最后一行只有1或2个项目显示，我想居中他们。正如您在最后一行中看到的，这些项被拉到布局的边缘，父项的宽度在它们之间被分割。这是因为正如我所说的，它们的宽度不是预先确定的。我所期望的是计算项目的宽度，因为它们显示为每行3个项目，
保持Gridpane的高度和宽度（纵横比）相同

我有一个javafx GridPane，当我调整阶段大小时，它会调整自己的大小以适应阶段的大小。我希望gridpane的高度与gridpane的宽度相匹配，并因此将大小调整为尽可能大的大小，同时保持这种约束。我不得不在GridPane的父级中添加更多的元素。我发现添加的元素完全没有正常的行为，并且相互重叠。当然，当我移除重写方法时，它们不再重叠，但当我调整舞台大小时，网格窗格并没有保持一个完美
如何将Android ViewPager2的高度包装到当前项目的高度？

此问题针对新的ViewPager2类。旧的ViewPager也有类似的问题，但解决方案需要扩展ViewPager。但是，ViewPager2是最终版本，因此无法扩展。在我的情况下，我有一个包含三个不同片段的ViewPager2。这些片段中的一个比其他两个高得多，这意味着当你滑动到其中一个较短的片段时，有很多空白。那么我如何有效地将ViewPager2包装到当前片段的高度呢？

如何保持包装的灵活项目与前一行的元素宽度相同？

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档