It feels too early on a Monday morning for this.
I have successfully used flexbox to align the overall page, but I am facing trouble aligning the individual link items. Specifically, I want to align the text of the links to the bottom. I tried using vertical-align: bottom, but it did not work as expected.
body,* {
margin: 0;
padding: 0;
font-family: sans-serif;
font-weight: normal;
text-transform: uppercase;
}
nav li:nth-child(1) {background: #eee;}
nav li:nth-child(2) {background: #ddd;}
nav li:nth-child(3) {background: #ccc;}
nav li:nth-child(4) {background: #bbb;}
/* Styles */
html,
body,
nav {
width: 100%;
height: 100%;
}
nav ul {
width: 100%;
height: 100%;
list-style: none;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: stretch;
}
nav li {
flex-grow: 1;
}
nav a {
display: block;
height: 100%;
text-align: center;
color: #fff;
text-decoration: none;
vertical-align: bottom
}
nav + div {
position: fixed;
bottom: 100px;
background: #fff;
width: 100%;
text-align: center;
}<nav>
<ul>
<li><a href="">Link one</a></li>
<li><a href="">Link two</a></li>
<li><a href="">Link three</a></li>
<li><a href="">Link four</a></li>
</ul>
</nav>
<div>
<h1>Heading</h1>
<h2>Sub heading</h2>
</div>