https://blog.csdn.net/weixin_43606158/article/details/90237258

之前筆者在開發專案的過程中就遇到了這個坑，flex佈局與position:absolute/fixed的衝突問題。後來想到了解決辦法，今天就與大家一起交流一下：

專案實戰：
我們現在想做一個頭部的導航欄，又想用fixed把它固定在上方，又想用彈性盒佈局去設定它內部的樣式，可是發現其中的彈性盒佈局已經失效了。

HTML程式碼如下：

<ul>
<li>協會簡介</li>
<li>協會章程</li>
<li>協會架構</li>
<li>資料下載</li>
</ul>
1
2
3
4
5
6
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
效果如下：

我們可以發現彈性盒佈局已經失效了，那麼我們如何解決這個問題呢？
其實很簡單，只需要在ul的外面再套一個盒子就可以了。然後外層盒子使用定位，內層盒子正常使用彈性盒佈局。

HTML改變後的程式碼為：
<div class="nav-box">
<ul>
<li>協會簡介</li>
<li>協會章程</li>
<li>協會架構</li>
<li>資料下載</li>
</ul>
</div>
1
2
3
4
5
6
7
8
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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
這時候我們發現問題已經迎刃而解了！

四川省奇呱科技有限公司
關注

6

6

10

專欄目錄

Ay__________:
ul {
position: fixed;
top: 0;
left: 50%;
/* 位移達到居中效果*/
transform: translateX(-50%);
/* calc 達到15px左右邊距效果*/
width: calc(100% - 30px);
/* 剩下部分和博主一樣 */
display: flex;
justify-content: space-between;
background: pink;}
這樣不加盒子也能達到效果.9 月前回復

————————————————
版權宣告：本文為CSDN博主「四川省奇呱科技有限公司」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處連結及本宣告。
原文連結：https://blog.csdn.net/weixin_43606158/article/details/90237258