How to expand background from flexbox grid text & images with equal height

Question

I have done a flexbox grid, it combines text cells with image cells. All the cells have the same height in each resolution, also text cells. Text cells have the text centered vertically, and this is a must. Now I need to assign each text cell a different background-color, but here I have the problem.

With align-items: center the text is centered vertically, but the background color is only applied to the text. Without align-items: center the background expands to all the cell, but the content is not centered vertically. Here is the codepen

Any suggestions in how to achieve the two features at same time?

• vertically centered text
• different background-color for each text cell

Thanks!

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing:    border-box;
    box-sizing:         border-box;
}
body { 
  margin: 0; 
  background: #333; 
  padding: 30px;
  font-family: Helvetica;
}
a {
  color: white;
  text-decoration: none;
}
h2  {
  font-size: 1.2em;
}
.wrap-items { 
  background-color: #ccc;
  padding: 0;
  margin: 0 auto;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: row;
  -webkit-flex-flow: row wrap; 
  flex-flow: row wrap; 
  display: -webkit-box;
  display: flex;
  justify-content: center;
  align-items: center;
  align-content: center;
}
.wrap-items .item { 
  -webkit-box-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 1 0 33.333%; 
  width: 33.33333%; 
  margin: 0;
  padding: 0;
  color: white;
  font-size: 0;
  border: none;
  background-color: steelblue;
}
.wrap-items .item.span-2 {
  -webkit-box-flex: 2 0 auto;
  -ms-flex: 2 0 auto;
  flex: 2 0 auto; 
  width: 66.6666%; 
  height: auto;
}
.wrap-items .item img { 
  width: 100%; 
  height: auto;
}
.wrap-items .item > .text {
  padding: 10px;
  font-size: 20px;
  height: 100%;
}
.item.un .text{
  background-color: orange;
}
.item.dos {
  background-color: brown;
}
.item.tres {
  background-color: violet;
}
@media screen and (max-width: 760px) {
  .wrap-items .item { 
    margin: 0;
  flex: 50%
  }
}
@media screen and (max-width: 400px) {
  .wrap-items .item { 
    margin: 0;
    flex: 100%;
  }
}

Answer 1

Use transforms instead of flexbox to vertically center the text.

1) Remove align-items: center from the .wrap-items class

2) Adjust the .wrap-items .item > .text class like this:

.wrap-items .item > .text {
  padding: 10px;
  font-size: 20px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Updated Codepen

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
body {
  margin: 0;
  background: #333;
  padding: 30px;
  font-family: Helvetica;
}
a {
  color: white;
  text-decoration: none;
}
h2 {
  font-size: 1.2em;
}
.wrap-items {
  background-color: #ccc;
  padding: 0;
  margin: 0 auto;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  -ms-flex-direction: row;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  display: -webkit-box;
  display: flex;
  justify-content: center;
  //align-items: center;
  //align-content: center;

}
.wrap-items .item {
  -webkit-box-flex: 0 1 auto;
  -ms-flex: 0 1 auto;
  flex: 1 0 33.333%;
  width: 33.33333%;
  margin: 0;
  padding: 0;
  color: white;
  font-size: 0;
  border: none;
  background-color: steelblue;
  position: relative;
}
.wrap-items .item.span-2 {
  -webkit-box-flex: 2 0 auto;
  -ms-flex: 2 0 auto;
  flex: 2 0 auto;
  width: 66.6666%;
  height: auto;
}
.wrap-items .item img {
  width: 100%;
  height: auto;
}
.wrap-items .item > .text {
  padding: 10px;
  font-size: 20px;
  position: absolute;
  top: 50%;
  transform: translate(0, -50%);
}
.item.un {
  background-color: orange;
}
.item.dos {
  background-color: brown;
}
.item.tres {
  background-color: purple;
}
@media screen and (max-width: 760px) {
  .wrap-items .item {
    margin: 0;
    flex: 50%
  }
}
@media screen and (max-width: 400px) {
  .wrap-items .item {
    margin: 0;
    flex: 100%;
  }
}

<div class="wrap-items">
  <!-- row 1 -->
  <div class="item span-2">
    <div class="text">
      <h2>THE TITLE</h2>
      <p>Just be water my friend</p>
      <p>Small people can do very big things.</p>
    </div>
  </div>
  <div class="item">
    <img src="https://placekitten.com/g/800/600" alt>
  </div>
  <!-- row 2 -->
  <div class="item un">
    <div class="text ">
      <a href="">one or more lines of text inside the box</a>
    </div>
  </div>
  <div class="item">
    <img src="https://placekitten.com/g/800/600" alt>
  </div>
  <div class="item dos">
    <div class="text">
      <a href="">text in the middle</a>
    </div>
  </div>
  <!-- row 3 -->
  <div class="item">
    <img src="https://placekitten.com/g/800/600" alt="">
  </div>
  <div class="item tres">
    <div class="text">
      <a href="">three lines of text centered vertically in the middle of the box</a>
    </div>
  </div>
  <div class="item">
    <img src="https://placekitten.com/g/800/600" alt>
  </div>
</div>