如何对齐flexbox中的内容[重复]答案

【问题标题】：How to align content in flexbox [duplicate]如何对齐flexbox中的内容[重复]
【发布时间】：2019-04-04 11:55:28
【问题描述】：

我正在尝试使用 flexbox 垂直对齐帖子中的内容。我希望标题顶部对齐，页脚底部对齐，文本副本与其他帖子的文本副本对齐。不同帖子的标题和文本副本的长度会有所不同。当我在标题中使用justify-content: spance-between 时，文本副本被推到底部。我希望在标题之后开始文本副本。你能帮我解决这个问题吗？

body {
  background-color: #eee;
  font-family: sans-serif;
}

.posts {
  display: flex;
  max-width: 700px;
  margin: 0 auto;
}

.post {
  flex-basis: calc(100%/3);
  padding: 1em;
  background-color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

header {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: space-between;
}

<div class="posts">
  <section class="post">
    <header>
      <h4 class="post__heading">Lorem ipsum dolor sit amet</h4>
      <p class="post__abstract">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.</p>
    </header>
    <footer class="post__footer">
      <p>Lorem ipsum dolor</p>
    </footer>
  </section>

  <section class="post">
    <header class="post__header">
      <h4 class="post__heading">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt </h4>
      <p class="post__abstract">Lorem ipsum dolor sit amet, </p>
    </header>
    <footer class="post__footer">
      <p>Lorem ipsum dolor</p>
    </footer>
  </section>

  <section class="post">
    <header>
      <h4 class="post__heading">Lorem ipsum dolor sit amet</h4>
      <p class="post__abstract">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,</p>
    </header>
    <footer class="post__footer">
      <p>Lorem ipsum dolor</p>
    </footer>
  </section>


</div>

【问题讨论】：

使用 bootstrap 怎么样 .. 我认为做你想做的事很容易 :)
你不能 align 在相邻的 flexbox 中弹性项目 - 这是不可能的......使用表格或 css 网格......请参阅 discussion here 以了解我的内容意思是，谢谢！
请添加您需要的布局图像。这将帮助其他用户更好地理解您的问题。例如：i.stack.imgur.com/i6EoY.png

标签： css flexbox

【解决方案1】：

如果你想对齐中心，请将属性赋予父类 'justify-content: center;对齐项目：居中；'

请在您现有的 css 中添加我的 css，您会看到您的中心内容现在是中心对齐的

建议的 CSS

.post__header{
    display: flex;
  justify-content: center;
  align-items: center;
}
.post__header h4,
.post__header p{
    color: #f00;

}

查看演示 enter link description here

【讨论】：

感谢您的回复。但是，我不想设置一个固定的高度，因为标题和文本副本的长度会有所不同。
没有问题，您可以删除高度属性表单类，它也可以，您的竞争保持在中心。