align-content and justify-content don't appear to be working when I test them in both Chrome and Firefox.
I'm puzzled as to why they're not functioning as expected.
#container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: center;
height: 90vh;
}
#header {
flex: 1 0 200px;
background-color: lightgreen;
height: 200px;
border-radius: 1rem;
}
#main {
flex: 1 0 200px;
background-color: coral;
height: 200px;
border-radius: 1rem;
}
#footer {
flex: 1 0 200px;
background-color: silver;
height: 200px;
border-radius: 1rem;
}
@media screen and (max-width: 915px) {
#container {
flex-flow: column wrap-reverse;
}
}<div id="container">
<div id="header">Header</div>
<div id="main">Main</div>
<div id="footer">Footer</div>
</div>