html - 使用 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>

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

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

标签： htmlcssflexboxvertical-alignmenttext-alignment

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