将最后一行中的flexbox项缩放到与js相同的宽度

7dl7o3gd 于 2021-09-23 发布在 Java

关注(0)|答案(2)|浏览(347)

我在flexbox中有children元素。我希望它们能够响应，最大宽度为200px。它们的伸缩性很好，但由于最后一行的子对象少于其他行，问题是这些子对象的大小与其他行不同，显然，我希望所有子对象的维度都相同。
首先，我尝试使用网格，但随后我无法将最后一行中的子对象居中。所以这不是解决办法。
我还读到了一个类似的问题，答案是flexbox不可能实现。
既然javascript是最后一个选项，那么如何使用它呢？

.wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.item {
  height: 50px;
  flex: 30%;
  max-width: 200px;
  background: #ababab;
  border: 2px solid #000;
}

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

jquery JavaScript Html css flexbox

来源：https://stackoverflow.com/questions/68310883/scale-flexbox-items-in-the-last-row-to-the-same-width-with-js

2条答案

按热度按时间

watbbzwu1#

这就是你要找的吗？

.wrapper {
  display: flex;
  flex-wrap: wrap;
  box-sizing : border-box;

}

.item {
  height: 50px;
  width:30%;
  max-width: 200px;
  background: #ababab;
  border: 2px solid #000;
}

<div class="wrapper">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

移除 flex:30% 这是几个属性的简写，其中一个是 flex-grow . flex grow允许子项在需要时增长。
而不是 justify-content: center; 我使用了默认值 flex-start ; 所以他们从左边开始。你可以用 justify-content:center 如果你觉得这样更好的话。

赞(0）回复(0）举报 2021-09-23

3zwtqj6y2#

确定整行中弹性项的大小(大小 S )
如果最后一行的项数与整行的项数不同，请计算其中的项数(计数 N )
更新/替代项目的样式 N 最后一个项目的弹性项目数，以便它们具有大小 S .
您还需要侦听“调整大小”事件，以重置屏幕上的样式 N 项目，并根据需要对新数量的项目重复样式更新。

赞(0）回复(0）举报 2021-09-23

我来回答

将最后一行中的flexbox项缩放到与js相同的宽度

2条答案

相关问题

热门标签

最新问答