I'm working on flexbox and mediaquery.
When the width is less than 500px, I want these red boxes to become smaller.
What I mean is:
original: flex-basis:150px -> after the width change: flex-basis:auto
but it doesn't work. My code below is too long but you just can focus on what I marked up.
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
body {
padding: 0;
margin: 0;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}
.container {
padding: 0;
display: flex;
flex-direction: column;
width: 900px;
border: 1px solid gray;
}
.container header {
border-bottom: 1px solid gray;
}
.content {
display: flex;
}
.content nav { /* here */
border-right: 1px solid gray;
flex-basis: 150px;
flex-shrink: 0;
padding-top: 10px;
}
.content nav ul {
margin: 0;
}
.content aside { /* here */
border-left: 1px solid gray;
flex-basis: 150px;
flex-shrink: 0;
padding-top: 10px;
}
.content main {
padding: 10px;
}
.container footer {
border-top: 1px solid gray;
padding-top: 10px;
padding-bottom: 10px;
}
@media (max-width: 500px) {
.content {
flex-direction: column;
}
/* here */ nav, aside {
border: 0;
flex-basis: auto;
padding-bottom: 10px;
}
main {
order: -1;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<h1>Welcome</h1>
</header>
<section class="content">
<nav>
<ul>
<li>html</li>
<li>css</li>
<li>javascript</li>
</ul>
</nav>
<main>
"On the other hand, we denounce with righteous indignation and dislike
men who are so beguiled and demoralized by the charms of pleasure of
the moment, so blinded by desire, that they cannot foresee the pain
and trouble that are bound to ensue; and equal blame belongs to those
who fail in their duty through weakness of will, which is the same as
saying through shrinking from toil and pain. These cases are perfectly
simple and easy to distinguish. In a free hour, when our power of
choice is untrammelled and when nothing prevents our being able to do
what we like best, every pleasure is to be welcomed and every pain
avoided. But in certain circumstances and owing to the claims of duty
or the obligations of business it will frequently occur that pleasures
have to be repudiated and annoyances accepted. The wise man therefore
always holds in these matters to this principle of selection: he
rejects pleasures to secure other greater pleasures, or else he
endures pains to avoid worse pains."
</main>
<aside>AD</aside>
</section>
<footer><a href="http://google.com">Google</a></footer>
</div>
</body>
</html>In the media query part, when I wrote the selector like "nav, aside", flex-basis doesn't work. but when I wrote like ".content nav, .content aside", it works.
I don't know why it makes such a difference. Why do I have to add a class name too?
