如何从具有相同高度的 flexbox 网格文本和图像扩展背景

Question

我做了一个 flexbox 网格，它结合了文本单元格和图像单元格。所有单元格在每个分辨率下都具有相同的高度，文本单元格也是如此。文本单元格的文本垂直居中，这是必须的。现在我需要为每个文本单元格分配不同的背景颜色，但我遇到了问题。

使用 align-items: center 文本垂直居中，但背景颜色仅应用于文本。如果没有 align-items: center 背景会扩展到所有单元格，但内容不会垂直居中。这里是 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;
}
.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

使用 transforms 而不是 flexbox 使文本垂直居中。

1) 从 .wrap-items class

中删除 align-items: center

2) 像这样调整 .wrap-items .item > .text class:

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

如何从具有相同高度的 flexbox 网格文本和图像扩展背景

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

css

vertical-alignment

flexbox

centering

Updated Codepen