CODEWITHSUNDEEP
htmlcssflexbox
crispyfrybits
crispyfrybits

Reputation: 47

Vertically center content with different heights using flex-direction: column

I am trying to create a layout using flex-direction: column with divs that have different specified heights. If you specify different heights for divs that share the same flexbox parent I find that the vertical alignment disappears.

I have tried all sorts of combinations using align-items, align-content, justify-content to no avail. I have used flex-grow in place of the height rule which also has no effect. The only way I can get the content to vertically center is if I make the items all the same relative height.

Here is my issue. 

header {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  height: 40em;
  background-color: #badabf;
}

.site-title {
  height: 32em;
  background-color: #DEA5A4;
}

.site-navigation {
  height: 8em;
  background-color: #AEC6CF;
}
<header>
  <div class="site-title">
    <h1> I am a page title </h1>
    <img src="http://www.nintendo.com/images/social/fb-400x400.jpg" width="100" height="100">
  </div>
  <nav class="site-navigation">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">History</a></li>
      <li><a href="#">Events</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Until I can get a good understanding of how to use flexbox effectively I will probably go back to creating layouts without flexbox. I really want to start using it soon, it feels much less hacky despite this issue I am having.

Upvotes: 3

Views: 2483

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 372099

The scope of a flex formatting context is the parent-child relationship.

In other words, flex layout exists only between the flex container and its children.

Descendants beyond the children do not participate in flex layout.

The elements you're targeting are children of a flex item (.site-title), so flex properties don't apply.

You will have to make flex items into flex containers to make flex properties work deeper in the HTML structure.

header {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  text-align: center;
  height: 40em;
  background-color: #badabf;
}

.site-title {
  height: 32em;
  background-color: #DEA5A4;
  display: flex;                 /* NEW */
  flex-direction: column;        /* NEW */
  align-items: center;           /* NEW */
  justify-content: center;       /* NEW */
}

.site-navigation {
  height: 8em;
  background-color: #AEC6CF;
}
<header>
  <div class="site-title">
    <h1> I am a page title </h1>
    <img src="http://www.nintendo.com/images/social/fb-400x400.jpg" width="100" height="100">
  </div>
  <nav class="site-navigation">
     <ul>
       <li><a href="#">Home</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">History</a></li>
       <li><a href="#">Events</a></li>
       <li><a href="#">Contact</a></li>
    </ul>
  </nav>
</header>

Upvotes: 3

Related Questions