align-self: flex-end 不会将游戏板移动到页面底部？答案

【问题标题】：align-self: flex-end won't move the game board to the bottom of the page?align-self: flex-end 不会将游戏板移动到页面底部？
【发布时间】：2019-04-01 06:08:46
【问题描述】：

嘿朋友们，我正在制作一个连接 4 游戏。我正在使用一张桌子作为董事会。我也在使用 flexbox 来定位电路板。我将 body 设置为 flex，并使用 justify-content 将其水平居中，我认为 align-items: flex-end 会将其放在页面底部，但它不起作用？任何帮助将不胜感激:)

html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	display: flex;
	justify-content: center;
	align-items: flex-end;
}

table {
	margin: auto;
	background-color: blue;
}

td {
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Connect Four</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="board-wrapper">
		<table>
			<tr class="row-1">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-2">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-3">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-4">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-5">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-6">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
		</table>
	</div>
</body>
</html>

【问题讨论】：

标签： css flexbox

【解决方案1】：

板实际上是在底部。您只需要使用min-height: 100vh，父级至少是视口的高度。

html, body {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	display: flex;
	justify-content: center;
	align-items: flex-end;
        min-height: 100vh;
}

table {
	margin: auto;
	background-color: blue;
}

td {
	border: 1px solid red;
	width: 100px;
	height: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Connect Four</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<div class="board-wrapper">
		<table>
			<tr class="row-1">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-2">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-3">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-4">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-5">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
			<tr class="row-6">
				<td class="column-1"></td>
				<td class="column-2"></td>
				<td class="column-3"></td>
				<td class="column-4"></td>
				<td class="column-5"></td>
				<td class="column-6"></td>
				<td class="column-7"></td>
			</tr>
		</table>
	</div>
</body>
</html>

【讨论】：

非常感谢！！不过还有2个问题。 1. 为什么我不能只使用 heght: 100vh，以及 2. 如何去除表格单元格之间的空间或装订线？
您可以使用 height 属性，但如果您添加更多内容或有人在小屏幕上查看，则使用 min height 会使页面变大
@Randy 使用table { border-collapse: collapse; }删除表格单元格之间的间距
哦，好吧，身高：100vh；会将其锁定到我的特定屏幕尺寸吗？并感谢您的其他答案:)

【解决方案2】：

表格正在与底部对齐，但主体的高度不是视口高度。将height: 100vh 添加到正文中，您会看到它。

【讨论】：

非常感谢！！不过还有2个问题。 1. 为什么我不能只使用 heght: 100vh，以及 2. 如何去除表格单元格之间的空间或装订线？
我没看懂问题1，你想用height: 100vh代替什么？对于 2 号检查 border-collapse 属性 developer.mozilla.org/en-US/docs/Web/CSS/border-collapse