以前小编在开发设计新项目的全过程中就碰到了这一坑，flex合理布局与position:absolute/fixed的矛盾难题。之后想起掌握决方法，今日就与大伙儿一起沟通交流一下：
新项目实战演练：
大家如今想干一块头部的导航栏栏，又想要fixed把它固定不动在上边，又想要延展性盒合理布局去设定它內部的款式，但是发觉在其中的延展性盒合理布局早已无效了。
HTML编码以下：
<ul>
<li>研究会介绍</li>
<li>研究会规章</li>
<li>研究会构架</li>
<li>材料免费下载</li>
</ul>
CSS编码以下：
ul {
position: fixed;
display: flex;
justify-content: space-between;
margin: 0 15px;
background: pink;
}
li {
flex: 1;
list-style: none;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
border: 1px solid #fff;
}
实际效果以下：
大家能够发觉延展性盒合理布局早已无效了，那麼大家怎样处理这一难题呢？
实际上非常简单，只必须在ul的外边再套一个小盒子便可以了。随后表层小盒子应用精准定位，里层小盒子一切正常应用延展性盒合理布局。
HTML更改后的编码为：
<div class="nav-box">
<ul>
<li>研究会介绍</li>
<li>研究会规章</li>
<li>研究会构架</li>
<li>材料免费下载</li>
</ul>
</div>
CSS更改后的编码为：
.nav-box {
width: 100%;
position: fixed;
}
ul {
display: flex;
justify-content: space-between;
margin: 0 15px;
background: pink;
}
li {
flex: 1;
list-style: none;
height: 100px;
line-height: 100px;
text-align: center;
font-size: 30px;
border: 1px solid #fff;
}
这时候候大家发觉难题早已得到解决了！
到此这篇有关详细说明flex合理布局与position:absolute/fixed的矛盾难题的文章内容就详细介绍到这了,大量有关flex与position:absolute/fixed矛盾內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容，期待大伙儿之后多多的适用脚本制作之家！