CODEWITHSUNDEEP
htmlcssflexbox
Tim Kelty
Tim Kelty

Reputation: 261

Flexbox equal-height elements, with dynamic height, without specifying a height or ratio

I'm not sure Flexbox can do this, but it seems to be getting close: http://codepen.io/timkelty/pen/XbKzaQ

.Nav {
  display: flex;
  max-width: 700px;
  background: whitesmoke;
}

.Nav-column {
  width: 33%;
  padding: 0 20px;
  display: flex;
  flex-direction: column;
}

.Nav-hdg {
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  flex: 1;
}

.Nav-content {
  background: red;
  flex: 1;
}

Basically I'm trying to have the .Nav-hdg elements be the same height, and vertically centered across the columns. I don't want to specify a height, however, I want the height to be the height of the tallest .Nav-hdg.

Anyone know how to tackle this, or if flexbox can do this?

Here's a rough mockup of what I'm trying to achieve: enter image description here

Upvotes: 0

Views: 1782

Answers (2)

janfoeh
janfoeh

Reputation: 10328

The only way I see would be to semantically separate headings, and to switch from flex-flow: column to flex-flow: row:

* {
  box-sizing: border-box;
}

main {
  display: flex;
  flex-flow: row wrap;
  align-items: stretch;
}

header, article {
  flex: 0 0 calc(33% - 2rem);
  margin: 1rem;
}

header {
  background-color: lightblue;
  display: flex;
  flex-flow: column;
  justify-content: center;
}

article {
  background-color: red;
}
<main>
  <header>
    <h1>A flex child</h1>
  </header>
  <header>
    <h1>A flex child with wrapping text, and therefore taller</h1>
  </header>
  <header>
    <h1>Another flex child</h1>
  </header>
  <article>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </article>
  <article>
    <ul>
      <li>1</li>
      <li>2</li>
    </ul>
  </article>
  <article>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
      <li>8</li>
    </ul>
  </article>
</main>

Upvotes: 0

Naisheel Verdhan
Naisheel Verdhan

Reputation: 5143

You'll need to define different flex box for headings and a different one for the content. This way you can specify justify-content: space-around; for the headings and justify-content: flex-start; for the content.

See this pen http://codepen.io/anon/pen/VLjrRP

Upvotes: 1

Related Questions