嘿朋友们，我正在做一个Connect 4游戏。我正在为董事会使用桌子。我还使用flexbox放置板子。我已将主体设置为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>
答案 0 :(得分：0)
表格正在与底部对齐，但是主体的高度不是视口的高度。将height: 100vh添加到正文中，您会看到它。
答案 1 :(得分：0)
该板实际上位于底部。您只需要使用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>