以上使用flexbox的等高图像和文字 [英] Equal height images and text above using flexbox

问题描述

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

<我使用了flex，因为史蒂夫乔布斯电影中的图像比图例更高，所以当我把图像放在div中的时候，会有一个缝隙。我希望它们的大小相同。所以我使用Flex来创建大小相同的div，然后使用图像作为背景填充它。哪个工作正常。但是，问题是我想显示图像上方的发布日期，由于某些原因，Flex决定将span元素与日期和图像元素放在一起如果我从中删除​​ display：flex ，

所以我想知道是否有办法保留Flex的方面，但也有图像上方的span元素，而不是旁边。

  div＃got-gridbox {
 padding：20px; 
背景：＃F1F1F1; 
 display：flex; 
 flex-flow：行换行
} 
 .movi​​e_container {
 width：150px; 
背景：#ddd; 
 padding：10px; 
 display：flex 
} 
 .movi​​e_container img {
 width：100％; 
 opacity：0; 
} 
 span {} .poster_1 {
 background：url（'http://image.tmdb.org/t/p/w500//7SUaf2UgoY0ZRGbQtRlfDkLDBCb.jpg'）no-repeat 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; 
 
  

解决方案

c> flex-direction 值是 row 。因此日期与图像一致。将 flex-direction 设置为列，这样两个元素占据父元素的全部宽度，日期是放置的以上的海报。

为了设置相同高度的图像，您需要将 flex：1 分配给海报元素。
$ b

flex：1 相当于 flex：1 1 0 [flex-生长flex-shrink flex-basis] ，它告诉项目与父容器一起增长和缩小，并吸收剩余的空间。

更新了JSFiddle

<

  div＃got-gridbox {padding：20px;背景：＃F1F1F1;显示：flex; flex-flow：row wrap} .movi​​e_container {width：150px;背景：#ddd;填充：10px;显示：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;背景颜色：绿色;显示：inline-block;}。poster_2 {background：url（'http://image.tmdb.org/t/p/w500//3tD0r8F6b7vygxZt3iRvf2ELwAO.jpg'）no-repeat center center; background-size：cover;背景颜色：绿色;显示：内联块; flex：1;}  

 < div id = -gridbox> < div class =movie_container> <跨度> 2015年8月1日和LT; /跨度> < div class =poster_1> < img src =http://image.tmdb.org/t/p/w500//7SUaf2UgoY0ZRGbQtRlfDkLDBCb.jpg>< / img> < / DIV> < / DIV> < div class =movie_container> <跨度> 2015年8月1日和LT; /跨度> < div class =poster_2> < img src =http://image.tmdb.org/t/p/w500//3tD0r8F6b7vygxZt3iRvf2ELwAO.jpg/> < / DIV> < / div>< / div>  

I'm having some trouble with aligning certain elements using Flexbox. You can see the JSfiddle here,

I used flex because the image from the Steve Jobs movie is higher then the image of Legend, so when I place the images in the divs there would be a gap.I want them to be the same size. So I used Flex to create divs with the same size and then use the image as the background to fill it up. Which works fine.

But the problem is that I want to show the release date above the images and for some reason Flex decides to put the span element with the date and the image element with the image next to each other.

If I remove the display: flex from the .movie_container it places the release date above the image but then the images have different sizes.

So I'm wondering if there's a way to keep the Flex aspect but also have the span element above the image instead of next to it.

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;
}

解决方案

The default flex-direction value is row. Thus the date is placed in line with the image. Set the flex-direction to column so that the two elements occupy the full width of the parent and the date is place above the poster.

For setting the images with same height, you need to assign flex: 1 to the poster elements.

flex: 1 is equivalent to flex: 1 1 0[flex-grow flex-shrink flex-basis] which tells the item to grow and shrink with the parent container and absorb the remaining space.

Updated JSfiddle

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;
}

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

这篇关于以上使用flexbox的等高图像和文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！