Reputation: 261
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:
Upvotes: 0
Views: 1782
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
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