使用 flexbox 垂直对齐多行文本

Question

我正在使用 flexbox 来对齐项目并且正在努力将多行文本顶部对齐到其父项的底部 div。我见过这样的例子，其中一个按钮已与其父按钮的底部对齐，但在每个项目中使用多行文本却没有达到相同的效果。

这是我要实现的目标：

这是我用下面的代码完成的：

这是我的代码：

.team {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.li {
  width: 25%;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

.expert-wrap {
  margin-top: auto;
}

<ul class="team">
  <li>
    <div class="thumb">Image</div>
    <div class="excerpt">Some text</div>
    <div class="expert-wrap">
      <div class="expertise-keywords">Expertise:
        <?php the_field('expertise'); ?>
      </div>
      <?php } ?>
    </div>
  </li>

</ul>

理想情况下，我想在顶部对齐文本，但我尝试过的所有方法 - 包括在 expert-wrap div 上应用 align-self: flex-end - 对齐文本的底线与文本的第一行。关于如何让底部 div 中的项目在顶部对齐，同时也与父项的底部对齐，有什么想法吗？

我对此感到很困惑。感谢任何建议。 -纳特

Answer 1

一个选项是给 .expert-wrap 一个高度，同时将 flex: 1 添加到 .excerpt，这样它会填充给定的 space 并将专业知识文本推到底部.

.team {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
}


li {
  background: cornsilk;
  width: 25%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.title {
  color: maroon;
}

.thumb img {
  width: 100%;
}


.excerpt {
  flex: 1;
  margin-bottom: 20px;
}

.expert-wrap {
  height: 40px;
}

<ul class="team">
  <li>
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1620057604592-ceccf0143ee8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt=""/>
    </div>
    <h3 class="title">Labore et dolore </h3>
    <div class="excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div class="expert-wrap">
      <div class="expertise-keywords">Expertise:
       Velit esse cillum.
      </div>
    </div>
  </li>
    <li>
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1620057604592-ceccf0143ee8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt=""/>
    </div>
    <h3 class="title">Labore et dolore </h3>
    <div class="excerpt">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div class="expert-wrap">
      <div class="expertise-keywords">Expertise:
        Duis aute irure dolor in reprehenderit.
      </div>
    </div>
  </li>
    <li>
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1620057604592-ceccf0143ee8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt=""/>
    </div>
    <h3 class="title">Labore et dolore </h3>
    <div class="excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,.</div>
    <div class="expert-wrap">
      <div class="expertise-keywords">Expertise:
        Vuptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
    </div>
  </li>
</ul>

如果此文本非常动态，您可以使用 javascript 找到具有最大高度的 .expert-wrap，并将该高度应用到其余的 .expert-wrap 或 .expertise-keywords.

看起来像这样：

const expertiseText = document.querySelectorAll('.expert-wrap');

const heights = [];

expertiseText.forEach(entry => {
  heights.push(entry.clientHeight)
})

const largestHeight = Math.max.apply(Math, heights);

expertiseText.forEach(entry => {
  entry.style.height = `${largestHeight}px`;
})

.team {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
}


li {
  background: cornsilk;
  width: 25%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.title {
  color: maroon;
}

.thumb img {
  width: 100%;
}


.excerpt {
  flex: 1;
  margin-bottom: 20px;
}

<ul class="team">
  <li>
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1620057604592-ceccf0143ee8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt=""/>
    </div>
    <h3 class="title">Labore et dolore </h3>
    <div class="excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div class="expert-wrap">
      <div class="expertise-keywords">Expertise:
       Velit esse cillum.
      </div>
    </div>
  </li>
    <li>
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1620057604592-ceccf0143ee8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt=""/>
    </div>
    <h3 class="title">Labore et dolore </h3>
    <div class="excerpt">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div class="expert-wrap">
      <div class="expertise-keywords">Expertise:
        Duis aute irure dolor in reprehenderit.
      </div>
    </div>
  </li>
    <li>
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1620057604592-ceccf0143ee8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt=""/>
    </div>
    <h3 class="title">Labore et dolore </h3>
    <div class="excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,.</div>
    <div class="expert-wrap">
      <div class="expertise-keywords">Expertise:
        Vuptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
    </div>
  </li>
</ul>

但您可能希望在 applyHeights() 函数上放置一个调整大小处理程序，以确保它在浏览器宽度变大或变小时重新计算。

看起来像这样：

const expertiseText = document.querySelectorAll('.expert-wrap');

function applyHeights() {

  const heights = [];

  expertiseText.forEach(entry => {
    heights.push(entry.clientHeight)
  })

  const largestHeight = Math.max.apply(Math, heights);

  expertiseText.forEach(entry => {
    entry.style.height = `${largestHeight}px`;
  })
}

applyHeights();

window.addEventListener('resize', function(event) {

  // Reset heights to auto so largest height can be recalculated
  expertiseText.forEach(entry => {
    entry.style.height = "auto";
  })

  applyHeights();
}, true);

.team {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 0;
}


li {
  background: cornsilk;
  width: 25%;
  padding: 10px;
  display: flex;
  flex-direction: column;
  font-size: 12px;
}

.title {
  color: maroon;
}

.thumb img {
  width: 100%;
}


.excerpt {
  flex: 1;
  margin-bottom: 20px;
}

<ul class="team">
  <li>
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1620057604592-ceccf0143ee8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt=""/>
    </div>
    <h3 class="title">Labore et dolore </h3>
    <div class="excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div class="expert-wrap">
      <div class="expertise-keywords">Expertise:
       Velit esse cillum.
      </div>
    </div>
  </li>
    <li>
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1620057604592-ceccf0143ee8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt=""/>
    </div>
    <h3 class="title">Labore et dolore </h3>
    <div class="excerpt">Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    <div class="expert-wrap">
      <div class="expertise-keywords">Expertise:
        Duis aute irure dolor in reprehenderit.
      </div>
    </div>
  </li>
    <li>
    <div class="thumb">
      <img src="https://images.unsplash.com/photo-1620057604592-ceccf0143ee8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=200&q=80" alt=""/>
    </div>
    <h3 class="title">Labore et dolore </h3>
    <div class="excerpt">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,.</div>
    <div class="expert-wrap">
      <div class="expertise-keywords">Expertise:
        Vuptate velit esse cillum dolore eu fugiat nulla pariatur.
      </div>
    </div>
  </li>
</ul>

使用 flexbox 垂直对齐多行文本

Vertically aligning multi-line text using flexbox

html

css

flexbox

vertical-alignment

text-alignment