不能让align-self在flexbox容器中工作

My code is below.

我的代码如下。

/* Global */
* {
	box-sizing: border-box;
	font-family: 'Ubuntu', sans-serif;
}

/* Container */
#container {
	width: 100vw;
	height: 100vh;
	display: flex;
	flex-direction: column;
}

/* About Me */
.about-me {
	width: 100vw;
	height: 50vh;
	background-color: #9b59b6;
}

.my-information {
	text-align: center;
	align-self: flex-end;
}

/* Blog Posts */
.blog-posts {
	width: 100vw;
	height: 50vh;
	background-color: #3498db;
}


/* Media Query (Desktop And Bigger) */
@media (min-width: 1100px) {
	/* Container */
	#container {
		flex-direction: row;
	}

	/* About Me */
	.about-me {
		height: 100vh;
	}

	/* Blog Posts */
	.blog-posts {
		height: 100vh;
	}
}

<!DOCTYPE html>
<html>

	<head>
		<!-- Meta -->
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- Title -->
		<title>Saad Al-Sabbagh</title>

		<!-- CSS -->
		<link rel="stylesheet" href="css/normalize.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Ubuntu">
		<link rel="stylesheet" href="css/main.css">
	</head>

	<body>

		<!-- Container -->
		<div id="container">
			<div class="about-me">
				<div class="my-information">
					<h1>A person</h1>
					<p>Front-End Web Developer, Blogger and an author on
						<a href="#">SitePoint</a>.</p>
				</div>
			</div>

			<div class="blog-posts">

			</div>
		</div>

	</body>

</html>

更多相关文章

随机推荐