使用flexbox垂直对齐多行文本[重复]答案

【问题标题】：Vertically aligning multi-line text using flexbox [duplicate]使用flexbox垂直对齐多行文本[重复]
【发布时间】：2021-07-29 08:17:06
【问题描述】：

我正在使用 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>

理想情况下，我想在顶部对齐文本，但我尝试过的所有操作 - 包括在该专家换行 div 上应用 align-self: flex-end - 将文本的底行与文本的顶行对齐.关于如何让底部 div 内的项目在顶部对齐，同时与父级底部对齐的任何想法？

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

【问题讨论】：

标签： html css flexbox vertical-alignment text-alignment

【解决方案1】：

一种选择是给.expert-wrap 一个高度，同时将flex: 1 添加到.excerpt，这样它就可以填充给定的空间并将专业知识文本推到底部。

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

【讨论】：