时间戳

首页 > 解决方案 > align-self: flex-end 不会将游戏板移动到页面底部？

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

问题描述

嘿朋友们，我正在制作一个连接 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>

标签： cssflexbox

解决方案

表格与底部对齐，但主体的高度不是视口高度。添加一个height: 100vh到身体，你会看到它。

推荐阅读