问题
I am practicing responsive web design, and using flex.
The problem is, I want to make the width of the .menu li 100% when the screen is smaller than 768px, so I tried to give .menu ul and .menu li width: 100%. But it doesn't work. I also tried flex: 0 0 100% but nothing happened.
How do I make the .menu li 100%?
* {
box-sizing: border-box;
}
nav ul,
.outline ul {
list-style-type: none;
margin: 0;
padding: 0;
}
/*common*/
/*layout*/
.container {
max-width: 900px;
margin: 0;
}
.outline {
flex: 2;
}
section {
flex: 7;
}
/*header*/
header {
display: flex;
}
.login ul,
.menu ul {
display: flex;
}
.login ul {
justify-content: flex-end;
}
.toparea {
margin-left: auto;
}
/*section*/
.contents {
display: flex;
}
/*media query*/
@media only screen and (max-width: 768px) {
body {
background-color: #EAC0F0;
}
header {
flex-direction: column;
}
.logo {
justify-content: center;
}
.login {
display: none;
}
.menu ul {
flex-direction: column;
}
.contents {
flex-direction: column;
}
.outline ul {
display: flex;
}
.outline li {
flex: 1;
}
}
/*footer*/
/*temp*/
img,
.login ul,
.menu ul,
.outline li {
border: 1px solid black;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>RWD</title>
<link rel="stylesheet" href="./rwd.css">
</head>
<body>
<div class="container">
<header>
<img src="" alt="logo">
<div class="toparea">
<nav class="login">
<ul>
<li>Login</li>
<li>Help</li>
</ul>
</nav>
<nav class="menu">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</nav>
</div>
</header>
<div class="contents">
<div class="outline">
<ul>
<li>Outline1-1</li>
<li>Outline1-2</li>
</ul>
</div>
<section>
<h1>heading</h1>
<p>paragraph</p>
</section>
</div>
<footer>
<address>Contact : email@email.com</address>
</footer>
</div>
</body>
</html>回答1:
The main issue here is the margin-left: auto in the toparea rule
If you want to keep the items stacked vertically, you update your media query like this, and reset the margin margin-left: 0
@media only screen and (max-width: 768px ) {
body { background-color: #EAC0F0; }
header { flex-direction: column; }
.logo { justify-content: center; }
.login { display: none; }
.menu ul { flex-direction: column; }
.contents { flex-direction: column; }
.outline ul { display: flex; }
.outline li { flex: 1; }
.toparea { margin-left: 0; } /* added */
}
Stack snippet
* { box-sizing: border-box; }
nav ul, .outline ul { list-style-type: none; margin: 0; padding: 0; }
/*common*/
/*layout*/
.container { max-width: 900px; margin: 0; }
.outline { flex: 2; }
section { flex: 7; }
/*header*/
header { display: flex; }
.login ul, .menu ul { display: flex; }
.login ul { justify-content: flex-end; }
.toparea { margin-left: auto; }
/*section*/
.contents { display: flex; }
/*media query*/
@media only screen and (max-width: 768px ) {
body { background-color: #EAC0F0; }
header { flex-direction: column; }
.logo { justify-content: center; }
.login { display: none; }
.menu ul { flex-direction: column; }
.contents { flex-direction: column; }
.outline ul { display: flex; }
.outline li { flex: 1; }
.toparea { margin-left: 0; } /* added */
}
/*footer*/
/*temp*/
img, .login ul, .menu ul, .outline li { border: 1px solid black; }<header>
<img src="" alt="logo">
<div class="toparea">
<nav class="login">
<ul>
<li>Login</li>
<li>Help</li>
</ul>
</nav>
<nav class="menu">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</nav>
</div>
</header>
<div class="contents">
<div class="outline">
<ul>
<li>Outline1-1</li>
<li>Outline1-2</li>
</ul>
</div>
<section>
<h1>heading</h1>
<p>paragraph</p>
</section>
</div>
<footer>
<address>Contact : email@email.com</address>
</footer>
</div>If you want them to stack horizontally, you update your media query like this, where you let the li grow
@media only screen and (max-width: 768px ) {
body { background-color: #EAC0F0; }
header { flex-direction: column; }
.logo { justify-content: center; }
.login { display: none; }
.menu li { flex-grow: 1; } /* changed */
.contents { flex-direction: column; }
.outline ul { display: flex; }
.outline li { flex: 1; }
.toparea { margin-left: 0; } /* added */
}
Stack snippet
* { box-sizing: border-box; }
nav ul, .outline ul { list-style-type: none; margin: 0; padding: 0; }
/*common*/
/*layout*/
.container { max-width: 900px; margin: 0; }
.outline { flex: 2; }
section { flex: 7; }
/*header*/
header { display: flex; }
.login ul, .menu ul { display: flex; }
.login ul { justify-content: flex-end; }
.toparea { margin-left: auto; }
/*section*/
.contents { display: flex; }
/*media query*/
@media only screen and (max-width: 768px ) {
body { background-color: #EAC0F0; }
header { flex-direction: column; }
.logo { justify-content: center; }
.login { display: none; }
.menu li { flex-grow: 1; }
.contents { flex-direction: column; }
.outline ul { display: flex; }
.outline li { flex: 1; }
.toparea { margin-left: 0; }
}
/*footer*/
/*temp*/
img, .login ul, .menu ul, .outline li { border: 1px solid black; }<header>
<img src="" alt="logo">
<div class="toparea">
<nav class="login">
<ul>
<li>Login</li>
<li>Help</li>
</ul>
</nav>
<nav class="menu">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</nav>
</div>
</header>
<div class="contents">
<div class="outline">
<ul>
<li>Outline1-1</li>
<li>Outline1-2</li>
</ul>
</div>
<section>
<h1>heading</h1>
<p>paragraph</p>
</section>
</div>
<footer>
<address>Contact : email@email.com</address>
</footer>
</div>回答2:
I'd suggest overriding flexbox for smaller screens and having it plain old display block, check out this codepen... https://codepen.io/anon/pen/mBrmaM
* { box-sizing: border-box; }
nav ul, .outline ul { list-style-type: none; margin: 0; padding: 0; }
/*common*/
/*layout*/
.container { max-width: 900px; margin: 0; }
.outline { flex: 2; }
section { flex: 7; }
/*header*/
header { display: flex; }
.login ul, .menu ul { display: flex; }
.login ul { justify-content: flex-end; }
.toparea { margin-left: auto; }
/*section*/
.contents { display: flex; }
/*media query*/
@media only screen and (max-width: 768px ) {
body { background-color: #EAC0F0; }
header { flex-direction: column; }
.logo { justify-content: center; }
.login { display: none; }
.toparea{margin-left:0;}
.menu ul { display: block;}
.menu ul li{ display: block;}
.contents { flex-direction: column; }
.outline ul { display: flex; }
.outline li { flex: 1; }
}
/*footer*/
/*temp*/
img, .login ul, .menu ul, .outline li { border: 1px solid black; }<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>RWD</title>
<link rel="stylesheet" href="./rwd.css">
</head>
<body>
<div class="container">
<header>
<img src="" alt="logo">
<div class="toparea">
<nav class="login">
<ul>
<li>Login</li>
<li>Help</li>
</ul>
</nav>
<nav class="menu">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</nav>
</div>
</header>
<div class="contents">
<div class="outline">
<ul>
<li>Outline1-1</li>
<li>Outline1-2</li>
</ul>
</div>
<section>
<h1>heading</h1>
<p>paragraph</p>
</section>
</div>
<footer>
<address>Contact : email@email.com</address>
</footer>
</div>
</body>
</html>回答3:
Just set .toparea{ margin-left:0 } on media query and you are good to go.
@media only screen and (max-width: 768px ) {
body { background-color: #EAC0F0; }
header { flex-direction: column; }
.logo { justify-content: center; }
.login { display: none; }
.menu ul { flex-direction: column; }
.toparea{margin-left:0;}
.contents { flex-direction: column; }
.outline ul { display: flex; }
.outline li { flex: 1; }
}
* { box-sizing: border-box; }
nav ul, .outline ul { list-style-type: none; margin: 0; padding: 0; }
/*common*/
/*layout*/
.container { max-width: 900px; margin: 0; }
.outline { flex: 2; }
section { flex: 7; }
/*header*/
header { display: flex; }
.login ul, .menu ul { display: flex; }
.login ul { justify-content: flex-end; }
.toparea { margin-left: auto; }
/*section*/
.contents { display: flex; }
/*media query*/
@media only screen and (max-width: 768px ) {
body { background-color: #EAC0F0; }
header { flex-direction: column; }
.logo { justify-content: center; }
.login { display: none; }
.menu ul { flex-direction: column; }
.toparea{margin-left:0;}
.contents { flex-direction: column; }
.outline ul { display: flex; }
.outline li { flex: 1; }
}
/*footer*/
/*temp*/
img, .login ul, .menu ul, .outline li { border: 1px solid black; }<div class="container">
<header>
<img src="" alt="logo">
<div class="toparea">
<nav class="login">
<ul>
<li>Login</li>
<li>Help</li>
</ul>
</nav>
<nav class="menu">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
<li>Menu4</li>
</ul>
</nav>
</div>
</header>
<div class="contents">
<div class="outline">
<ul>
<li>Outline1-1</li>
<li>Outline1-2</li>
</ul>
</div>
<section>
<h1>heading</h1>
<p>paragraph</p>
</section>
</div>
<footer>
<address>Contact : email@email.com</address>
</footer>
</div>回答4:
Just add to your CSS (in the media query part) :
.toparea {
width: 100%;
}
It works for me on Chrome, FF, Edge :)
回答5:
Change flex to block in smaller screen like below:
@media only screen and (max-width: 768px ) {
.menu ul {
display: block;
}
}
From this CSS, UL will behave like block and will have full 100% width so your all child LI will also have same 100% width.
来源：https://stackoverflow.com/questions/46362559/how-do-i-give-a-flex-item-100-width