R Reveley R Reveley - 25 days ago 6
CSS Question

flexbox align text in links to bottom of screen

It may be too early on a Monday morning for this.

I have used flexbox to align the overall page but not the individual link items and want to align the text of the links to the bottom. I epected vertical-align: bottom to work but it didn't.



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>




Answer

You can use display: flex; on nav li a links, Just like:

nav li a {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

Have a look at the snippet below:

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 li a {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
<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>

Hope this helps!