Question

我的代码如下。

/* 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>

我正在尝试使用flexbox创建一个简单的两列网站，我听过很多不好的故事，我不应该使用flexbox进行完整的网站布局，但我相信布局这样简单，最好使用一个Flexbox的。

我有一个div，你可以看到类.my-information，我试图将它自动对齐到flex容器的底部。关于我，但它似乎不起作用。

Answer 1

您还需要在有关div和{@ 1}}的中心元素上添加display: flex。

＆＃13;

justify-content: center

＆＃13;

#container {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.about-me {
  width: 100vw;
  height: 50vh;
  display: flex;                /*Added*/
  justify-content: center;      /*Added*/
  background-color: #9b59b6;
}
.my-information {
  text-align: center;
  align-self: flex-end;
}
.blog-posts {
  width: 100vw;
  height: 50vh;
  background-color: #3498db;
}

＆＃13;

无法在Flexbox容器中使用align-self

1 个答案: