主页 / coding / 问题 / 78948277
Accepted
rschristian
Asked: 2024-09-04 19:01:46 +0800 CST

使用 flex-wrap 和动态宽度子元素减少尾随空格

  • 772

在我的网站上，我有一个标签列表，我想以砖石样式的布局显示这些标签，这些标签的行定义清晰，但没有列定义。这可以通过以下方式轻松实现：flex-wrap: wrap单独操作，如下所示：

 body {
  background-color: red;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: .25rem;
  width: 12rem;
  background-color: lime;
}
.wrapper > div {
  color: white;
  background-color: black;
  padding: .25rem;
  border-radius: .25rem;
}
<div class="wrapper">
  <div>Lorem</div>
  <div>ipsum</div>
  <div>dolor</div>
  <div>sit</div>
  <div>amet</div>
  <div>consectetur</div>
  <div>adipiscing</div>
  <div>elit</div>
  <div>Duis</div>
  <div>lobortis</div>
  <div>tempor</div>
  <div>mauris</div>
  <div>vitae</div>
  <div>ornare</div>
</div>

我遇到的问题是，右边距上往往会有一个装订线，行从那里无法填满。对于一两行来说，这没什么问题，但往往相当一致，每十几行中就有一行是“满的”。请原谅我画得很糟糕，但这是我快速尝试说明这一点的方法：

上述代码的图像表示，展示了我想要避免的“排水沟”效果

你可以想象，如果你垂直复制这张图片几次，右侧就会出现非常明显的边缘，与左边距的内容形成鲜明对比，造成不平衡。

如果我理解正确的话，这是一个已知问题，并且CSS Masonry 规范（如果有任何进展）将尝试解决，但目前有任何解决方案吗？以某种方式调整每行，还是自动边距？不确定，有点无稽之谈。如果有比flex-wrap实现此目标更好的方法，我很乐意切换到其他方法，但我所看到的一切grid似乎都是关于明确定义的列和行，而这正是我所不知道的。

css

1 个回答

  1. Best Answer

    在使用弹性盒布局时，实现与砖石布局略微相似的效果的最快方法是允许其项目根据下一个项目无法容纳的剩余空间来收缩和增大。

    https://developer.mozilla.org/en-US/docs/Web/CSS/flex

    这里我对你的代码片段做的主要改变是使用：

    flex: 1 1 auto;

    副作用是无法提前控制项目大小，因为它会根据最小宽度占用的空间大小而动态变化。任何其他解决方案都需要打乱项目的顺序，以找到最佳的方式来组织它们以填充空间。

    为了弥补这一缺陷，我设计了弹性项目，使它们的内容与中心对齐。

    body {
  background-color: red;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.25rem;
  width: 12rem;
  background-color: lime;
  
  /*here you set the fixed padding*/
  padding: 1em 1em;
}

.wrapper > div {
  color: white;
  background-color: black;
  padding: 0.25rem;
  border-radius: 0.25rem;
 
  /*here you allow flex items to shrink and grow*/
  /*shorthand for flex-grow flex-shrink flex-basis*/
  flex: 1 1 auto;  
  
  text-align: center;
}
    <div class="wrapper">
  <div>Lorem</div>
  <div>ipsum</div>
  <div>dolor</div>
  <div>sit</div>
  <div>amet</div>
  <div>consectetur</div>
  <div>adipiscing</div>
  <div>elit</div>
  <div>Duis</div>
  <div>lobortis</div>
  <div>tempor</div>
  <div>mauris</div>
  <div>vitae</div>
  <div>ornare</div>
</div>

    如果你希望保持弹性项目的宽度不变，你可以指示布局使用动态间隙来填充每行的剩余空间，同时将第一个和最后一个分别保持在行的开头和结尾justify-content

    justify-content: space-between;


    body {
  background-color: red;
}

.wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 0.25rem;
  width: 12rem;
  background-color: lime;
  
  /*here you set the fixed padding*/
  padding: 1em 1em;
  
  justify-content: space-between;
}

.wrapper > div {
  color: white;
  background-color: black;
  padding: 0.25rem;
  border-radius: 0.25rem;      
}
    <div class="wrapper">
  <div>Lorem</div>
  <div>ipsum</div>
  <div>dolor</div>
  <div>sit</div>
  <div>amet</div>
  <div>consectetur</div>
  <div>adipiscing</div>
  <div>elit</div>
  <div>Duis</div>
  <div>lobortis</div>
  <div>tempor</div>
  <div>mauris</div>
  <div>vitae</div>
  <div>ornare</div>
</div>

    • 1

相关问题