Как мне остановить, чтобы сгибаемые изображения перекрывали друг друга?

Question

Я создал страницу администратора, используя PouchDB / JS для загрузки контента в базу данных, чтобы он отображался на другой странице, но когда элементы загружаются на главную страницу, они перекрывают друг друга при изменении размера страницы, и / или не попадать в другой столбец, несмотря на

flex-wrap: wrap;

используется в контейнере. Мой JS создает новые записи на главной странице, поэтому код не совпадает, но я создал несколько div с тем же изображением, чтобы продемонстрировать проблему. На веб-странице это выглядит хорошо, но вот что происходит при изменении размера страницы:

Это похоже на то, чего я пытаюсь достичь:

Я хочу, чтобы все изображения были фиксированного размера (одна треть контейнера) (даже если загружаемое изображение имеет разные размеры), а когда страница становится меньше, я хочу, чтобы поля падали ниже друг друга (поэтому только 1 изображение в столбце на мобильных устройствах)

Может кто-нибудь взглянуть на мой код и сообщить мне, как решить мою проблему, пожалуйста?

@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

Я видел, как вы применили набивку, чтобы изогнуть ребенка.

Решение простое. Применить box-sizing: border-box; к .filmRow.

Причина в том, что вы устанавливаете .filmRow width: 33% при добавлении к нему заполнения.

box-sizing: border-box; делает целое div, включая отступ, равным width: 33%.

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

EDIT:

А так как width устанавливается на 33% родительского. Без min-width гибкий ребенок не будет переноситься, потому что 33% - это всегда относительная единица.

Answer 2

попробуйте удалить минимальную ширину из .filmRow img

.filmRow {
 -webkit-flex-flow: row wrap;
  justify-content: space-around;
}
.filmRow img {
  max-width: 200px;
  width: 100%;
  margin: 10px;
  border-radius: 20px;
}

---

Рабочая демонстрация

@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 {
 -webkit-flex-flow: row wrap;
  justify-content: space-around;
}
.filmRow img {
  max-width: 200px;
  width: 100%;
  margin: 10px;
  border-radius: 20px;
}

#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>