css 如何限制Flex容器中div的数量

pb3s4cty 于 12个月前发布在其他

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

我有一个div设置为flex和row wrap。在里面我有一个divs集合，每个divs包含一张图片。随着viewport宽度的增加，它们会正确地重新排列自己，但我想限制每行的图片数量。我可以通过改变图片的宽度来实现这一点，但这很烦人。有没有更简单的方法，比如“max-boxes-per-row”概念？下面是相关的CSS

#gallery-box {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.box {
  display: inline-block;
  width: 80vw;
  aspect-ratio: 1/1;

  text-align: center;
  font-size: 22px;
  padding-top: 16px;
  font-family: "Quicksand", sans-serif;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

字符串

css

来源：https://stackoverflow.com/questions/77456870/how-do-i-limit-the-number-of-divs-in-a-flex-container

2条答案

按热度按时间

olqngx591#

您可能希望使用display:grid，以便可以指定一行中有多少个span。您可以了解有关此grid-column的更多信息

赞(0）回复(0）举报 12个月前

kgsdhlau2#

#gallery-box {
  position: relative;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}

.box {
  display: inline-block;
  width: calc(100% / 3); /* Adjust the 3 in calc(100% / 3) to your preferred maximum number of pictures per row. */
  aspect-ratio: 1/1;

  text-align: center;
  font-size: 22px;
  padding-top: 16px;
  font-family: "Quicksand", sans-serif;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

字符串

赞(0）回复(0）举报 12个月前

我来回答

css 如何限制Flex容器中div的数量

2条答案

相关问题

热门标签

最新问答