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

i have done flexbox grid, combines text cells image cells. cells have same height in each resolution, text cells. text cells have text centered vertically, , must. need assign each text cell different background-color, here have problem.

with align-items: center text centered vertically, background color applied text. without align-items: center background expands cell, content not centered vertically. here codepen

any suggestions in how achieve 2 features @ same time?

• vertically centered text
• different background-color 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; } {   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 , (max-width: 760px) {   .wrap-items .item {      margin: 0;   flex: 50%   } } @media screen , (max-width: 400px) {   .wrap-items .item {      margin: 0;     flex: 100%;   } } 

use transforms instead of flexbox vertically center text.

1) remove align-items: center .wrap-items class

2) adjust .wrap-items .item > .text class 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;  }  {    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 , (max-width: 760px) {    .wrap-items .item {      margin: 0;      flex: 50%    }  }  @media screen , (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 water friend</p>        <p>small people can 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 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 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 middle of box</a>      </div>    </div>    <div class="item">      <img src="https://placekitten.com/g/800/600" alt>    </div>  </div>