Как настроить чистую кладочную сетку flexbox в Chrome, которая уже работает в Firefox - PullRequest
Новая
       13

Как настроить чистую кладочную сетку flexbox в Chrome, которая уже работает в Firefox

0 голосов
/ 11 мая 2019

У меня есть сетка Flexbox, которая отлично работает в Firefox, включая автоматическое изменение размера и т. Д. Но в Chrome это не работает, проверьте изображения.

Это код SCSS, который я использую 

.jinya-vertical-art-gallery {
  flex-flow: row wrap;
  margin-left: -1rem;
  flex: 0 0 100%;
  margin-top: 2rem;
  display: flex;
  width: calc(100% + 1rem);
}

.jinya-vertical-art-gallery__page-title {
  font-family: $jinya-page-title-font-family;
  font-size: $jinya-page-title-font-size;
  width: 100%;
  display: block;
  margin-top: 2rem;
}

.jinya-vertical-art-gallery__artwork {
  height: 15rem;
  padding: 0.5rem;
  border: none;
  width: auto;
  box-sizing: content-box;
  display: flex;
  flex: 1 1 auto;
  flex-flow: row nowrap;
  justify-content: flex-start;
  margin: 0;
  max-width: 27rem;
}

.jinya-vertical-art-gallery-artwork__image {
  flex: 1 1 auto;
  height: 15rem;
  width: 100%;
  margin: 0;
  object-fit: cover;
  max-width: 27rem;
  cursor: pointer;
}

.jinya-vertical-art-gallery__caption {
  display: none;
}

.jinya-vertical-art-gallery-caption__title {
  margin: 0 0 1rem;
  display: block;
  font-size: $jinya-vertical-art-gallery-caption-font-size;
  font-weight: $jinya-vertical-art-gallery-caption-font-weight;
  font-family: $heading-font-family;
}

А это обработанный HTML: 

<div class="jinya-vertical-art-gallery">
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/200/320" alt="Aokigahara"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/270/350" alt="Zack"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/230/320" alt="Final touch"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/300/280" alt="autumn"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/410/620" alt="Treehouse"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/190/390" alt="Treehouse Process"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/240/250" alt="Gentle"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/210/380" alt="Lolita"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/100/320" alt="Step by Step 2"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/400/370" alt="Spring"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/290/310" alt="Sailor Goths"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/310/300" alt="Rest"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/120/360" alt="Guardian Demon"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/180/280" alt="Link"> </figure>
</div>

Вот как это выглядит в Firefox:

Вот как этовыглядит в Chrome:

Обратите внимание, изображения должны быть размытыми по причинам авторского права, но сетка должна быть видимой.

1 Ответ

0 голосов
/ 12 мая 2019

Похоже, что вы переутомили макет с помощью гибких макетов - каждая фигура не обязательно должна быть гибким контейнером.Устранение этого ограничения заставит каждую фигуру художественного произведения принять размер детей - в этом случае это будет художественная работа.Пример решения можно найти ниже: 

.jinya-vertical-art-gallery {
  flex-flow: row wrap;
  margin-left: -1rem;
  flex: 0 0 100%;
  margin-top: 2rem;
  display: flex;
  width: calc(100% + 1rem);
}

.jinya-vertical-art-gallery__page-title {
  font-family: $jinya-page-title-font-family;
  font-size: $jinya-page-title-font-size;
  width: 100%;
  display: block;
  margin-top: 2rem;
}

.jinya-vertical-art-gallery__artwork {
  padding: 0.5rem;
  border: none;
  width: auto;
  box-sizing: content-box;
  flex: 0 0 auto;
  margin: 0;
  max-width: 27rem;
}

.jinya-vertical-art-gallery-artwork__image {
  height: 15rem;
  margin: 0;
  max-width: 27rem;
  cursor: pointer;
}

.jinya-vertical-art-gallery__caption {
  display: none;
}

.jinya-vertical-art-gallery-caption__title {
  margin: 0 0 1rem;
  display: block;
  font-size: $jinya-vertical-art-gallery-caption-font-size;
  font-weight: $jinya-vertical-art-gallery-caption-font-weight;
  font-family: $heading-font-family;
}
<div class="jinya-vertical-art-gallery">
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/200/320" alt="Aokigahara"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/270/350" alt="Zack"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/230/320" alt="Final touch"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/300/280" alt="autumn"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/410/620" alt="Treehouse"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/190/390" alt="Treehouse Process"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/240/250" alt="Gentle"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/210/380" alt="Lolita"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/100/320" alt="Step by Step 2"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/400/370" alt="Spring"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/290/310" alt="Sailor Goths"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/310/300" alt="Rest"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/120/360" alt="Guardian Demon"> </figure>
<figure class="jinya-vertical-art-gallery__artwork"> <img class="jinya-vertical-art-gallery-artwork__image" src="https://picsum.photos/180/280" alt="Link"> </figure>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...