flexbox将文本链接到屏幕底部

Question

周一早上可能为时尚早。

我使用flexbox来对齐整个页面而不是单独的链接项，并希望将链接的文本与底部对齐。我认为垂直对齐：底部工作，但它没有。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以在display: flex;链接上使用nav li a，就像：

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

请看下面的代码段：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

希望这有帮助！

Answer 2

您只需将css替换为导航

即可

nav a {
    height: 100%;
    text-align: center;
    color: #fff;
    text-decoration: none;
    display: -webkit-flex;
    /* Safari */
    -webkit-align-items: center;
    /* Safari 7.0+ */
    display: flex;
    align-items: center;
}

Answer 3

		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;
        display: flex;
        }
		nav a {
        color: #ffffff;
        display: block;
        align-self: end;
        text-align: center;
        text-decoration: none;
        vertical-align: bottom;
        empty-cells: 0;
       width: 100%;
       }

		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>