Я впервые играю с 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;
}
