javascript - 如何阻止 flex 图像相互重叠？

Question

我已经使用 PouchDB/JS 创建了一个管理页面来将内容上传到数据库，因此它会显示在另一个页面上，但是当元素上传到主页时，当页面调整大小时它们会相互重叠，和/或不属于另一列尽管

flex-wrap: wrap;

在容器中使用。我的 JS 在主页上创建了新条目，因此代码并不完全相同，但我创建了一些具有相同图像的 div 来演示问题。在网页上看起来不错，但这是调整页面大小时发生的情况:

这与我要实现的目标类似:

我希望所有的图像都是固定大小(容器的三分之一)(即使上传的图像具有不同的尺寸)，并且当页面变小时我希望这些框彼此下方(所以在移动设备上每列只有一张图片)

有人可以看看我的代码并让我知道如何解决我的问题吗？

@import url(https://fonts.googleapis.com/css?family=Raleway);
body {
  margin: 0;
  font-family: 'Raleway', georgia, arial;
  background-color: #e0e0e0;
  text-align: center;
}

h1 {
  color: #aaaaaa;
  text-align: left;
}

.sortFilms {
  text-align: left;
  display: inline-block;
  background-color: #ff6699;
  width: 80%;
  padding: 20px;
}

header {
  text-align: center;
  display: inline-block;
  border-bottom: 5px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
  border-style: solid;
  border-color: #aaaaaa;
  width: 80%;
  padding: 20px;
  background-color: #e0e0e0;
}

.filmRow img {
  min-width: 200px;
  width: 200px;
  border-radius: 20px;
}

.filmRow {
  flex-direction: column;
  text-align: center;
  width: 33%;
  padding: 10px;
}

#filmContainer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.sorting {
  width: 20%;
}

h2 {
  font-weight: 700;
  font-size: 2em;
  width: 50%;
  color: #AAAAAA;
}

#formTitle {
  margin-top: 0;
  margin-bottom: 0;
}

<header>
  <img src="img/rv-logo.png">
  <p class="tagline">Want to know whether or not it's worth paying to watch a certain film or not? See what we think first!</p>
</header>

<div class="sortFilms">
  <h2 id="formTitle">Browse reviews</h2>
  <p class="sorting"> Sort by:
    <label>Ascending <input type="radio" name="sort" checked/></label>
    <label>Descending <input type="radio" name="sort"/></label>
  </p>
  <div id='filmContainer'>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>
    <div class="filmRow"><img src="https://www.arthipo.com/image/cache/catalog/genel-tasarim/all-posters/sinema-cinema-film-postersleri/yabanci-filmler/pfilm311-deadpool_2d2fe71a-movie-film-poster-sales-poster-baski-1000x1000.jpg">
    </div>

  </div>
</div>

Answer 1

我看到你对 flex child 应用了 padding。

解决方法很简单。将 box-sizing: border-box; 应用于 .filmRow 。

原因是你设置了.filmRow的width: 33%，同时添加了padding。

box-sizing: border-box; 使包括填充在内的整个 div 为 width: 33%。

https://codepen.io/blackcityhenry/pen/ZwzOXa

编辑:

并且由于 width 被设置为父级的 33%。没有 min-width ，flex child 将不会换行，因为 33% 始终是一个相对单位。