CODEWITHSUNDEEP
cssflexbox
Peter Boomsma
Peter Boomsma

Reputation: 9808

Equal height images and text above using flexbox

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

Upvotes: 1

Views: 2841

Answers (1)

m4n0
m4n0

Reputation: 32255

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>

Upvotes: 2

Related Questions