【发布时间】：2021-11-01 15:46:52
【问题描述】：
我使用 flexbox 创建了一个网页，并包含了一个响应式 flex 导航栏。但是，当汉堡包展开时，它会将页面的其余部分向下推。我已经尝试将 .active 类定位到“显示块”和 10000 的 z-index 上的绝对位置，但这些都没有帮助。我还尝试将导航包装在行 flex 容器内，但这破坏了布局的其余部分。
已经考虑了在这个链接中找到的 js fiddle:http://jsfiddle.net/hRKgV/ 但它没有弹性盒布局，我想知道浮动是否符合弹性盒的概念，因为它也会从正常的流程中删除该元素文件？
任何建议都会很棒！
这是索引页面的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Flex</title>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style type="text/css">
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
background-color: #faf6bf;
}
.header {
background-image: url("images/index.jpg");
max-width: 100%;
height: auto;
background-color: #cccccc;
height: 500px;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
box-shadow: 2px 2px 5px purple;
}
.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 30px;
}
@media screen and (max-width: 700px) {
h1 {
font-size: 40px;
}
h3 {
font-size: 26px;
}
}
.navbar {
position: relative;
font-size: 18px;
background-color: navy;
border: 1px solid rgba(0, 0, 0, 0.2);
padding-bottom: 10px;
clear: both;
}
.main-nav {
list-style-type: none;
display: none;
}
.nav-links,
.logo {
text-decoration: none;
color: rgba(255, 255, 255, 0.7);
}
.main-nav li {
text-align: center;
margin: 15px auto;
position:
}
.logo {
display: inline-block;
font-size: 22px;
margin-top: 10px;
margin-left: 20px;
}
.navbar-toggle {
position: absolute;
top: 10px;
right: 20px;
cursor: pointer;
color: rgba(255, 255, 255, 0.8);
font-size: 24px;
}
.active {
display: block;
}
@media screen and (min-width: 768px) {
.navbar {
display: flex;
justify-content: space-between;
padding-bottom: 0;
height: 70px;
align-items: center;
}
.main-nav {
display: flex;
margin-right: 30px;
flex-direction: row;
justify-content: flex-end;
}
.nav-links {
margin-left: 40px;
}
.logo {
margin-top: 0;
}
.navbar-toggle {
display: none;
}
.logo:hover,
.nav-links:hover {
color: rgba(255, 255, 255, 1);
}
}
.row {
display: flex;
margin-left: 80px;
margin-right: 80px;
flex-wrap: wrap;
}
.fakeimg {
background-color: #faf6bf;
width: 100%;
padding: 20px;
}
.side {
-webkit-flex: 20%;
-ms-flex: 20%;
flex: 20%;
background-color: orange;
color: white;
padding: 20px;
}
.side2 {
-webkit-flex: 20%;
-ms-flex: 20%;
flex: 20%;
background-color: orange;
color: white;
padding: 50px;
}
.main {
flex: 60%;
background-color: #fffcc7;
padding: 20px;
}
.footer {
background-color: brown;
text-align: center;
color: white;
padding: 20px;
}
@media (max-width: 700px) {
.row {
flex-direction: column;
}
}
</style>
</head>
<body>
<nav class="navbar">
<span class="navbar-toggle" id="js-navbar-toggle">
<i class="fa fa-bars"></i> </span>
<a href="#" class="logo">logo</a>
<ul class="main-nav" id="js-menu">
<li>
<a href="#" class="nav-links">Home</a>
</li>
<li>
<a href="#" class="nav-links">Products</a>
</li>
<li>
<a href="#" class="nav-links">About Us</a>
</li>
<li>
<a href="#" class="nav-links">Contact Us</a>
</li>
<li>
<a href="#" class="nav-links">Blog</a>
</li>
</ul>
</nav>
<script type="text/javascript">
let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener('click', function() {
mainNav.classList.toggle('active');
});
</script>
<div class="header">
<div class="hero-text">
<h1>I am Jane Doe</h1>
<h3>And I'm a Photographer</h3>
<button>Hire me</button>
</div>
</div>
<div class="row">
<div class="side">
<h2>About Me</h2>
<h5>Photo of me:</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text about me in culpa qui officia deserunt mollit anim..</p>
<h3>More Text</h3>
<p>Lorem ipsum dolor sit ame.</p>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div><br>
<div class="fakeimg" style="height:60px;">Image</div>
</div>
<div class="main">
<h2>TITLE HEADING</h2>
<h5>Title description, Dec 7, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
<br>
<h2>TITLE HEADING</h2>
<h5>Title description, Sep 2, 2017</h5>
<div class="fakeimg" style="height:200px;">Image</div>
<p>Some text..</p>
<p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>
<div class="side2">
<h4>follow me on socila media:</h4><br />
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
</div>
<script type="text/javascript">
let mainNav = document.getElementById('js-menu');
let navBarToggle = document.getElementById('js-navbar-toggle');
navBarToggle.addEventListener('click', function() {
mainNav.classList.toggle('active');
});
</script>
<!-- Footer -->
<div class="footer">
<h2>Footer</h2>
</div>
</body>
</html>【问题讨论】：
标签： html css flexbox navigation frontend