0

I am trying to vertically align the content in posts using flexbox. I want heading to be top aligned, footers to be bottom aligned, and text copy to be aligned with other posts' text copy. The length of heading and text copy would vary for different posts. When I use justify-content: spance-between in header, the text copy is being pushed to bottom. I want the text copy starting after the heading. Could you please help me to solve this problem?

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>
Moncy Mohan
  • 1
  • 1
  • how about using bootstrap .. I think it easy to do what you want to do :) – Joji Apr 04 '19 at 03:19
  • 1
    you can't *align* flex items in adjacent flexboxes - that is not possible... use tables or css grid... see the [discussion here](https://stackoverflow.com/questions/55272962/alignment-of-content-vertically-in-adjacent-flexbox-containers/55291645#55291645) to see what I mean, thank you! – kukkuz Apr 04 '19 at 03:23
  • Please add an image of the layout you need. That will help other users understand your question better. For example: https://i.stack.imgur.com/i6EoY.png – YourPalNurav Apr 04 '19 at 03:35

1 Answers1

0

What ever you want to align center please give property to parent class 'justify-content: center; align-items: center;'

Kindly add my css in your existing css and you see that you center content is now center aligned

Suggested CSS

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

}

See demo enter link description here

deepak panwar
  • 148
  • 1
  • 2
  • 13