align-self: flex-end не переместит игровое поле вниз страницы? - PullRequest
Новая
       14

align-self: flex-end не переместит игровое поле вниз страницы?

0 голосов
/ 01 апреля 2019

Эй, друзья, я играю в Connect 4.Я использую стол для доски.Я также использую flexbox для позиционирования доски.У меня есть тело, настроенное на сгибание, и я использовал 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>

Ответы [ 2 ]

0 голосов
/ 01 апреля 2019

Доска на самом деле - это внизу. Вам просто нужно, чтобы родительский элемент был как минимум высотой области просмотра, используя 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>
0 голосов
/ 01 апреля 2019

Таблица выравнивается по дну, но высота тела не является высотой области просмотра. Добавьте height: 100vh к телу, и вы увидите его.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...