部落格園樣式美化(背景圖片、公告欄頭像、看板娘、滑鼠特效、網易雲音樂)
阿新 • • 發佈:2020-12-28
今天有人問到下面這樣一個問題
他想要的效果:
而他做出來的效果是:
他這個是flex佈局,完了外層的盒子給了個 justify-content: space-between; 樣式,這樣大盒子裡每個小檢視塊就均分了,但是換行後假如每行只能排4個,如果下一行不夠4個,被兩端對齊。
給出我的做法:
1、基本思路是外層容器flex佈局,讓內部的每個小容器從左向右按順序排列(justify-content: flex-start;),並且允許換行(flex-start;flex-wrap: wrap;);
2、內層容器為了佔滿每一行,每個小容器用寬度用 calc()計算寬度。
例如每行佈局4個,寬度寫法:width: calc((100% - 36px) / 4);
取外層寬度100%-內層4個小容器的中間3個間距,我這裡每個是12px,剩下的寬度就是每行分佈的所有容器佔據的總寬度,除以4就是每個寬度。
3、最後加個 :nth-of-type(4n+0){margin-right: 0;} ,作用是讓每間隔4個內部小容器中最後一個的右間距為0,避免佔用父容器的寬度。
css部分:
.content {width: 800px;margin: 50px auto;}
/*重點是下面幾行樣式*/
.outer-box {display: flex;justify-content: flex-start; flex-wrap: wrap;}
.outer-box .inner-item {
width: calc((100% - 36px) / 4);
height: 120px;
margin-right: 12px;
margin-bottom: 14px;
background: #66d9b5;
}
.outer-box .inner-item:nth-of-type(4n+0){margin-right: 0;}
html部分:
<div class="content">
<div class="outer-box" >
<div class="inner-item">
<div>我是內容</div>
</div>
<div class="inner-item">
<div>我是內容</div>
</div>
<div class="inner-item">
<div>我是內容</div>
</div>
<div class="inner-item">
<div>我是內容</div>
</div>
<div class="inner-item">
<div>我是內容</div>
</div>
<div class="inner-item">
<div>我是內容</div>
</div>
</div>
</div>
最終效果: