Question

我一直在使用左侧弹出式导航栏的网站上工作。我把我的内容用flex-box和wrap包装得对了，但是当导航栏打开并从我的页面上掉下来时，我的#main部分不会换行。任何人都可以帮助我，因为我是CSS3的新手。

代码（HTML）：

<!DOCTYPE html>

<html>
<head>

<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="nav.js"></script>

</head>

<body>

<nav id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" 
    onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Contact</a>
</nav>

<section id="main">
  <span style="font-size:30px;cursor:pointer" 
    onclick="openNav()">&#9776;</span>
  <br>
  <section class="box-container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
  </section>
</section>

</body>
</html>

代码（CSS）：

* {
box-sizing: border-box;
}

body {
font-family: arial;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: flex;
    flex-wrap: wrap;
    transition: 0.3s;
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 15px;
    font-size: 26px;
    margin-left: 30px;
}

/* PROBLEM ARIA */

#main {
    transition: margin-left .5s;
    padding: 16px;
    display: flex;
    flex-flow: wrap;
    width: auto;
    /*float: left;*/
}

.box {
    text-align: center;
    width: calc(33.33% - 20px);
    height: 280px;
    margin: 10px;
    background-color: black;
}

.box-container {
    padding: 25px;
    min-width: 97vw;
    display: flex;
    flex-wrap: wrap;
    background-color: white;
    margin: auto;
}

Answer 1

如果没有HTML代码，我们只能根据您发布的图片进行猜测，但似乎您的.sidenav是灵活容器的一部分，这就是为什么当它变成其他东西时它移动的原因可见。

只需将.sidenav从flex-container（#main）中取出，让它独立于flex部分。

Flex-box Dilema

1 个答案: