Question

我一直在使用flexbox一段时间。这是一个非常强大的功能，但似乎有一些陷阱。

我创建了jsfiddle作为示例，但我基本上想要一个包含以下内容的布局：

1）thumbnails容器没有指定的宽度但是有自动边距，所以它始终居中。

2）具有.thumbnail维度的140px x 140px子元素，其中包含30px的固定装订线

问题是因为我无法为thumbnails容器分配宽度，所以我无法定位最后一行thumbnail:nth-child(lastone)以防止它添加30px的边距，因为我不知道每行会有多少。结果thumbnails无法居中，因为它总是在右边有一个额外的30px填充。

实际上是否可以解决此问题而无需使用js计算屏幕尺寸值？

Answer 1

我有一个游戏，实现你想要的最好的方法（假设你想要所有的缩略图触摸容器的两侧）是给所有缩略图15px的边距（所以当两个彼此相邻，两个边距都加上并给出30px），然后通过给容器一个负余量来移除外围的额外空间。

HTML：

<button id="add">Add Child</button>
<div id="thumbnails">
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
  <div class="thumbnail th-1"></div>
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
  <div class="thumbnail"></div>
</div>

CSS：

* {
  box-sizing: border-box;  
}

#thumbnails {
  display: flex;
  flex-wrap: wrap;
  width:auto;
  margin: -15px; /* Negative margin to counter outer thumbnails */
  justify-content:center;
}

.thumbnail {
  height: 140px;
  background: red;
  width: 140px;
  margin: 15px; /* Margin applied to all sides */
}

https://jsfiddle.net/ho02uLpz/2/

如果你不介意在所有缩略图周围都有15px的边距，你可以从#thumbnails容器中删除负边距。

是否可以使用具有自动边距但固定装订线的弹散框？

1 个答案: