为什么display flex连续隐藏第一张图片？

时间：2018-10-31 13:53:28

标签： html css flexbox

我有一排我想要的缩略图：居中（如果它们小于窗口）；并且可以滚动（如果它们大于窗口）。

快要工作了。但是，第一张图像的一部分在屏幕左侧消失。如果我有更多图像，则第一个图像会完全消失。我在做什么错了？

.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 :(得分：2)

如果不需要flex-您可以使用内联块和空白nowrap：

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

答案 1 :(得分：1)

原因

原因是您的盒子比容器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可能对您有用，但这并不是该问题的答案。

答案 2 :(得分：0)

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

相关问题
最新问题