Question

我在使用Flexbox对齐某些元素时遇到了一些麻烦。您可以看到JSfiddle here，

我使用flex是因为史蒂夫乔布斯电影中的图像比图例的图像高，所以当我将图像放在div中时会有一个间隙。我希望它们的大小相同。因此，我使用Flex创建大小相同的div，然后使用图像作为背景来填充它。哪个工作正常。

但问题是我想在图像上方显示发布日期，并且出于某种原因，Flex决定将带有日期的span元素和图像元素与图像相邻放置。

如果我从display: flex移除了.movie_container，则会将发布日期置于图片上方，但之后图片的大小会有所不同。

所以我想知道是否有一种方法可以保持Flex方面，但是也可以在图像上方而不是旁边使用span元素。

div#got-gridbox {
  padding: 20px;
  background: #F1F1F1;
  display: flex;
  flex-flow: row wrap
}
.movie_container {
  width: 150px;
  background: #ddd;
  padding: 10px;
  display: flex
}
.movie_container img {
  width: 100%;
  opacity: 0;
}
span {} .poster_1 {
  background: url('http://image.tmdb.org/t/p/w500//7SUaf2UgoY0ZRGbQtRlfDkLDBCb.jpg') no-repeat center center;
  background-size: cover;
  background-color: green;
  display: inline-block;
}
.poster_2 {
  background: url('http://image.tmdb.org/t/p/w500//3tD0r8F6b7vygxZt3iRvf2ELwAO.jpg') no-repeat center center;
  background-size: cover;
  background-color: green;
  display: inline-block;
}

Answer 1

默认flex-direction值为row。因此，日期与图像一致。将flex-direction设置为column，以便两个元素占据父级的整个宽度，日期位于海报上方。

要设置相同高度的图像，您需要将flex: 1指定给海报元素。

flex: 1相当于flex: 1 1 0[flex-grow flex-shrink flex-basis]，它告诉项目使用父容器增长和缩小并吸收剩余空间。

Updated JSfiddle

＆＃13;

div#got-gridbox {
  padding: 20px;
  background: #F1F1F1;
  display: flex;
  flex-flow: row wrap
}
.movie_container {
  width: 150px;
  background: #ddd;
  padding: 10px;
  display: flex;
  flex-direction: column;
}
.movie_container img {
  width: 100%;
  opacity: 0;
}
span {} .poster_1 {
  background: url('http://image.tmdb.org/t/p/w500//7SUaf2UgoY0ZRGbQtRlfDkLDBCb.jpg') no-repeat center center;
  background-size: cover;
  background-color: green;
  display: inline-block;
}
.poster_2 {
  background: url('http://image.tmdb.org/t/p/w500//3tD0r8F6b7vygxZt3iRvf2ELwAO.jpg') no-repeat center center;
  background-size: cover;
  background-color: green;
  display: inline-block;
  flex: 1;
}

＆＃13;

<div id="got-gridbox">
  <div class="movie_container">
    <span>2015-08-01</span>
    <div class="poster_1">
      <img src="http://image.tmdb.org/t/p/w500//7SUaf2UgoY0ZRGbQtRlfDkLDBCb.jpg"></img>
    </div>
  </div>
  <div class="movie_container">
    <span>2015-08-01</span>
    <div class="poster_2">
      <img src="http://image.tmdb.org/t/p/w500//3tD0r8F6b7vygxZt3iRvf2ELwAO.jpg" />
    </div>
  </div>
</div>

＆＃13;

使用flexbox上面的相同高度图像和文本

1 个答案: