Почему дисплей flex скрывает первое изображение подряд? - PullRequest
Новая
       4

Почему дисплей flex скрывает первое изображение подряд?

0 голосов
/ 31 октября 2018

У меня есть ряд миниатюр, которые я хочу: по центру, если они меньше окна; и прокручиваемый, если они больше окна.

Это почти работает. Однако часть первого изображения исчезает слева от экрана. Если у меня будет еще больше изображений, первые полностью исчезнут. Что я делаю не так? 

.container {
  background-color:green;
  display:flex;
  justify-content:center;
  overflow-x:scroll;
  overflow-y:hidden;
}
.box {
  background-color:red;
  margin:0.5vh;
}
<div class='container'>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
</div>

Ответы [ 3 ]

0 голосов
/ 31 октября 2018

Если вам не нужен flex - вы можете использовать встроенный блок и пробел сейчас: 

.container {
  background-color: green;
  overflow: auto;
  white-space: nowrap;
  text-align: center;
  line-height:0;       /* make bottom padding same as top padding by removing line-height */
  vertical-align:middle;
}

.box {
  display: inline-block;
  padding: 0.5vh;
}
<div class='container'>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div><!--
  
     please note I comment out white space between elements for equal padding

--><div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div><!--
  --><div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div><!--
  --><div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div><!--
  --><div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div><!--
  --><div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div><!--
  --><div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div><!--
  --><div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div><!--
--></div>
0 голосов
/ 31 октября 2018

Причина

Причина в том, что ваши ящики - это больше, чем контейнер width, а в вашем контейнере нет flex-wrap: wrap; (значение по умолчанию - no-wrap). Таким образом, ящики не могут переноситься, а ваш контейнер - display: flex, его width не будет увеличиваться со своими дочерними элементами (прямоугольниками), и будет вести себя как блок и просто заполняет экран.

Решение

Попробуйте display: inline-flex вместо этого. Поскольку он ведет себя так же, как inline элементов, его width будет расти, чтобы соответствовать его дочерним элементам width.

Вот рабочий пример, основанный на вашем коде: 

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}

.container {
  background-color: green;
  display: inline-flex;
  justify-content: center;
}

.box {
  background-color: red;
  margin: 0.5vh;
}

.box img {
  display: block;
}
<body>
  <div class="wrapper">
    <div class='container'>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
      <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
    </div>
  </div>
</body>

почему бы не inline-block?

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

<div class='box'></div><!-- no extra white space here --><div class='box'></div>

Вы можете использовать float, чтобы решить эту проблему или уменьшить font-size контейнера, который не так хорош, как inline-flex решение.

Также обратите внимание, что хотя inline-block может работать для вас, это не ответ на этот вопрос.

0 голосов
/ 31 октября 2018 

.container-container {
    display:flex;
    justify-content:center;
 }

.container {
  background-color:green;
  display:flex;
  /* remove center alignment from inner container but leave display:flex
  -- justify-content:center; */
 /* change overflow-x to auto so we don't have to see it until we need it   -- overflow-x:scroll; */
  overflow-x:auto; /* now overflow auto */
  overflow-y:hidden;
}
.box {
  background-color:red;
  margin:0.5vh;
}
/* bright pink border on the first box to demonstrate it worked */
.firstbox {
   border:6px solid hotpink;
}
/* blue border on the last box to demonstrate if it shows up */
.lastbox {
   border:6px solid blue;
}
<!-- add an extra wrapper with display flex and your center alignment -->
 <div class='container-container'>
<div class='container'>
  <div class='box firstbox'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
</div>
</div>
<!-- add an extra wrapper with display flex and your center alignment -->
   <div class='container-container'>
<div class='container'>
  <div class='box firstbox'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
  <div class='box lastbox'><img src='https://s3.amazonaws.com/YouGarden/Web/100x100/510187.jpg' /></div>
</div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...