Как установить дочерний фон Flexbox на 100% высоты и центрировать текст по вертикали

Question

Я хочу, чтобы цвет фона заполнил область, чтобы она всегда была одинаковой высоты для самого длинного объема текста, и центрировал текст вертикально, независимо от того, сколько строк. Я не хочу устанавливать фиксированную высоту для родителя, если это возможно, поскольку это может измениться.

.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.flexbox .sm-col-3 {
  width: calc(1/3 * 100% - 16px);
}
.entry {
  position: relative;
}
.entry-image {
  display: block;
  margin: 0 auto;
}
.entry-title {
  margin: 0
}
.entry-title-link {
  position: absolute;
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 8px 9px 9px;
  background: rgba(0, 87, 149, 1);
  color: #fff;
  width: 100%;
}

<div class="articles-container flexbox">
  <div class="entry sm-col-3">
    <div class="entry-header">
      <a href="#" class="entry-image-link"><img
          src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-product-6_large.png"></a>
    </div>
    <div class="entry-content">
      <h2 class="entry-title">
        <a href="#" class="entry-title-link">Some Long Wrapping Two Line Text</a>
      </h2>
    </div>
    <div class="entry-footer"></div>
  </div>
  <div class="entry sm-col-3">
    <div class="entry-header">
      <a href="#" class="entry-image-link"><img
          src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-product-6_large.png"></a>
    </div>
    <div class="entry-content">
      <h2 class="entry-title">
        <a href="#" class="entry-title-link">One Line Text</a>
      </h2>
    </div>
    <div class="entry-footer"></div>
  </div>
</div>

Answer 1

Вы должны думать об этой проблеме с точки зрения двух разных макетов.

• первый - поместить ваши entry деления рядом друг с другом, по 3 на строку, одинаковой высоты каждая. Это flex row, который вы используете на .flexbox
• , второй находится внутри каждого entry деления, чтобы поместить изображение сверху, а ссылку внизу. Это то, что я предлагаю здесь с другой гибкой версткой, вложенной в первую.

Таким образом, способ сделать это - применить flex и column к .sm-col-3, чтобы создать вложенный гибкий макет. И тогда только вам решать, как вам нужно распределить пространство. Наиболее распространенным способом сделать это в этом случае будет выделение фиксированного размера (или, по крайней мере, фиксированного соотношения) для изображения сверху, а затем добавьте flex: 1 к тексту внизу, чтобы он занимал все, что осталось, таким образом, занимая одинаковое количество места на каждом entry.

Теперь, если вам также необходимо вертикально центрировать следующий в этом нижнем разделе .entry-content, то есть 3-я проблема, которую нужно решить.

• поле внизу должно иметь его содержимое вертикально по центру

За исключением того, что теперь мы разделили проблему на подзадачи , этот третий легко решить (тонны онлайн-уроков о том, как вертикально расположить что-то внутри своего родителя). Но так как мы делаем здесь флексбоксы, давайте используем это в третий раз. Это будет display: flex и align-items на .entry-content.

.flexbox {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-left: -8px;
  margin-right: -8px;
}
.flexbox .sm-col-3 {
  width: calc(1/3 * 100% - 16px);
  display: flex;
  flex-direction: column;
}
.entry {
  position: relative;
}
.entry-image {
  display: block;
  margin: 0 auto;
}
.entry-content {
  flex: 1;
  background: rgba(0, 87, 149, 1);
  padding: 8px 9px 9px;
  display: flex;
  align-items: center;
}
.entry-title {
  margin: 0;
}
.entry-title-link {
  text-align: center;
  color: #fff;
  width: 100%;
}

<div class="articles-container flexbox">
  <div class="entry sm-col-3">
    <div class="entry-header">
      <a href="#" class="entry-image-link"><img
          src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-product-6_large.png"></a>
    </div>
    <div class="entry-content">
      <h2 class="entry-title">
        <a href="#" class="entry-title-link">Some Long Wrapping Two Line Text</a>
      </h2>
    </div>
    <div class="entry-footer"></div>
  </div>
  <div class="entry sm-col-3">
    <div class="entry-header">
      <a href="#" class="entry-image-link"><img
          src="https://cdn.shopify.com/s/files/1/0533/2089/files/placeholder-images-product-6_large.png"></a>
    </div>
    <div class="entry-content">
      <h2 class="entry-title">
        <a href="#" class="entry-title-link">One Line Text</a>
      </h2>
    </div>
    <div class="entry-footer"></div>
  </div>
</div>