How to center text vertically in flexbox with image stick to the bottom?

Question

I have 3 column grid with images using flexbox. The issue I encountered is how to properly put smaller image in the middle column to the bottom and the center text vertically in the rest space using flexbox.

I have very ugly solution, which quite unresponsive, so I sure the is better solution for this. Read some articles and watch 3 video courses about flexbox, but didn't found a case with such situation.

Also tried to make smaller image absolute, but then I couldn't center text vertically as I wanted.

Would be grateful for any suggestions.

.container{
    max-width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
}
img {
    width: 100%;
    height: 100%;
    display: block;
}

.fe2{
  flex: 1;
  text-align: center;
}

.flex-cont-inner {
    display: flex;
    flex-flow: column;
    height: 100%;
}

.flex-cont-inner img {
 height: initial;
}

.message{
  font-size: 2.3vw;
  margin: 0 auto;
}

.message p {
    color: blue;
    font-size: 2vw;
    max-width: 80%;
    margin: 0 auto;
    padding: 34.5% 0px;
}

.author{
  position: relative;
}

.author:after{
          content: 'ANONYMUS';  
          position: absolute;
          font-size: 1vw;
          color:red;
          top: 140%;
}

<div class="container">
   <div class="fe2">
                    <img src="http://lorempixel.com/output/nightlife-h-c-500-700-3.jpg" alt="">
                </div>
                <div class="fe2 no-end">
                    <div class="flex-cont-inner">
                    <div class="message">
                        <p>Lorem ipsum dolor sit amet, consecte adipng elit. Voluptas doloremque dig<span class="author">nissimos </span>repreh!</p>
                    </div>
                    <img src="http://lorempixel.com/output/city-q-c-500-200-4.jpg" alt="">
                    </div>
                </div>
                <div class="fe2">
                    <img src="http://lorempixel.com/output/nightlife-h-c-500-700-2.jpg" alt="">
                </div>
  
</div>

score 2 · Accepted Answer · edited May 23 '17 at 10:28

You need to use margin-top: auto; in both your message and your image. There's a really good explanation by Michael_B here about the use of auto margins with flexbox.

jsFiddle

CODE SNIPPET:

.container {
  max-width: 90%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
img {
  width: 100%;
  height: 100%;
  display: block;
}
.fe2 {
  flex: 1;
  text-align: center;
}
.flex-cont-inner {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.flex-cont-inner img {
  height: initial;
  margin-top: auto;
}
.message {
  font-size: 2.3vw;
  margin-top: auto;
}
.message p {
  color: blue;
  font-size: 2vw;
}
.author {
  position: relative;
}
.author:after {
  content: 'ANONYMUS';
  position: absolute;
  font-size: 1vw;
  color: red;
  top: 140%;
}

<div class="container">
  <div class="fe2">
    <img src="http://lorempixel.com/output/nightlife-h-c-500-700-3.jpg" alt="">
  </div>
  <div class="fe2 no-end">
    <div class="flex-cont-inner">
      <div class="message">
        <p>Lorem ipsum dolor sit amet, consecte adipng elit. Voluptas doloremque dig<span class="author">nissimos </span>repreh!</p>
      </div>
      <img src="http://lorempixel.com/output/city-q-c-500-200-4.jpg" alt="">
    </div>
  </div>
  <div class="fe2">
    <img src="http://lorempixel.com/output/nightlife-h-c-500-700-2.jpg" alt="">
  </div>

</div>

How to center text vertically in flexbox with image stick to the bottom?

1 Answers1