Question

所以我有一个嵌套的flexbox用于网站布局。第一个flexbox确保列中的3个项保持相同的宽度，而另一个保持在另一个上面。

第二个是我遇到麻烦的地方。我希望在两个侧边栏之间有一个主箱，主箱比侧栏大3倍。我希望它能够在垂直和水平方向上进行响应性扩展，但我不确定如何将其作为一个整体来解决。

and the result I'm getting is more akin to this

代码摘录：

   .flexcontainer {
    width: 100vw;
    max-width: 1123px;
    min-width: 800px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
}   

.container {
    width: 95vw;
    max-width:1123px;
    min-height: 675px;
    min-width: 800px;
    margin-left:auto;
    margin-right:auto;
    position:relative;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    justify-content: space-around;
    -webkit-justify-content: space-around;
    -ms-justify-content: space-around;
    flex-flow: row;
    -webkit-flex-flow: row;
    -ms-flex-flow: row;
    align-items: stretch;
    -webkit-align-items: stretch;
    -ms-align-items: stretch;
}

.leftcont { 
    border: #00ff00 2px solid;
    text-align:center;
    max-width:175px;
    min-height: 666px;
    position: absolute;
    left: 0;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
}

.bodycont {
    border: #00ff00 2px solid;
    padding-left: 5px;
    padding-right: 5px;
    text-align:left;
    min-height: 666px;
    min-width: 465px;
    position:absolute;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    flex: 6;
    -webkit-flex: 6;
    -ms-flex: 6;
}

.rightcont {
    border: #00ff00 2px solid;
    text-align:center;
    max-width: 175px;
    min-height: 666px;
    position: absolute;
    display: flex;
    display: -webkit-flex;
    display: -ms-flex;
    flex-flow: column;
    -webkit-flex-flow: column;
    -ms-flex-flow: column;
    right: 0;
    flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
}


#footercont {
    border: #00ff00 2px solid;
    max-width: 95vw;
    min-width: 796px;
    margin-left:auto;
    margin-right:auto;
    bottom: 0;
    position: relative;
    font-size: 10px;
    color: #00ff00;
    text-align: center;
}

.footer {
    background-image: url(/images/layout/aegis-copyright.png);
    background-repeat: no-repeat;
    height: 18.77vw;
    max-width: 86px;
    max-height: 19px;
    margin-left: auto;
    margin-right: auto;
}

和

<div class="flexcontainer">

<header id="header">Header</header>

<div class="container">

<div class="leftcont">

<!--Links-->
     <div id="navigation"></div>
    <span>
    <a href=" ">Link</a><br />   
    <a href=" ">Link</a><br />
      <a href=" ">Link</a><br />  
    <a href=" ">Link</a><br />
    <a href=" ">Link</a><br />
    <a href=" ">Link</a><br />
    <a href=" ">Link</a><br />
    <a href=" ">Link</a><br />
    <a href=" ">Link</a><br />
    <a href=" ">Link</a><br />
    </span>

</div><div class="bodycont">

<div id="bodyheader"></div>

<br />
<span class="welcome"> 
Welcome message.</span>
<p>

</div><div class="rightcont"> 

<!--Character-->
      <div id="character"></div>
    <span>

    <a href=" " class=" "><span class="name">First Name Last Name</span></a>
    </span>
    <span>Title</span>

<p>

</div></div>

<footer id="footercont">
<div class="footer"></div>
<span>Copyright</span>
</footer>
</div>

如果有人能告诉我，我做错了什么会令人惊讶，你会得到我永恒的感谢！

Answer 1

首先，删除所有绝对定位。没有必要实现您的布局。另外，绝对定位的元素忽略 flex属性。

其次，你有很多不必要的规则膨胀你的代码。你可以安全地删除它们。

要使元素占用一行中的剩余空间，请使用：flex: 1。

要在框之间创建间隙，请使用margin。

revised codepen demo

Answer 2

只是添加答案：不是给身体容器一个50％的弹性，你可以给它一个flex：2而另一个是flex：1。

.leftcont {
    flex: 1;
    margin: 10px 10px 10px 0;
}
.bodycont {
    /* flex: 0 0 50%; */
    flex: 2;
    margin: 10px 0;
}
.rightcont {
    flex: 1;
    margin: 10px 0 10px 10px;
}

Answer 3

您应该使用flex-grow属性根据比率进行排列

给中心div

flex-grow:3

和左右容器

flex-grow:1

这应该有用https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow?v=control

嵌套Flexbox扩展问题

3 个答案: