盒子flex浮動佈局並且換行後左對齊
阿新 • • 發佈:2020-12-29
今天有人問到下面這樣一個問題
他想要的效果:
而他做出來的效果是:
他這個是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就是每個寬度。
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>
最終效果: