我是第一次使用Flexbox，我想知道为什么不属性align-items：flex-end使用justify-content：center . 我尝试更改为其他值而不是flex-end，但仍然没有任何东西会绕十字轴移动 .
这是我的HTML / CSS代码 . 我究竟做错了什么？
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Playing with CSS Flexbox</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--
<nav id="logo">
<p class="logotext">Welcome There!!</p>
</nav>
-->
<main id="container">
<section class="box red-box">
<!--
<img src="images/Chilli-medium.jpg" alt="chilli" class="first-image">
-->
</section>
<section class="box green-box">
</section>
<section class="box blue-box">
</section>
<section class="box violet-box">
</section>
<section class="box black-box">
</section>
<section class="box yellow-box">
</section>
<section class="box grey-box">
</body>
</html>
body {
margin: 0;
font-size: 16px;
font-family: Arial, sans-serif;
background-color: white;
}
#container {
width: 100%;
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-content: flex-end;
}
.box {
padding: 50px;
box-sizing: border-box;
height: 50vh;
width: 5vw;
}
.red-box {
background-color: indianred;
}
.green-box {
background-color: green;
}
.blue-box {
background-color: blue;
}
.violet-box {
background-color: rebeccapurple;
}
.black-box {
background-color: black;
}
.yellow-box {
background-color: yellow;
}
.grey-box {
background-color: grey;
}