flex平均分布换行后自动对齐
生活随笔
收集整理的這篇文章主要介紹了
flex平均分布换行后自动对齐
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目的效果:
如何可以使用flex布局 進行平均分布,又可以換行呢?
我最開始是這樣做的:
效果:
如果我多添加幾個空白的html是不是就搞定了?
.bt_classify_name_empty{margin: 5px;width: 20%;height: 0px;}<div id="dv_classify" class="classify"><button class="bt_classify_name">平面</button><button class="bt_classify_name">平面</button><button class="bt_classify_name">平面</button><button class="bt_classify_name">平面</button><button class="bt_classify_name">平面</button><button class="bt_classify_name">平面</button>下面是多添加幾個空白的<button class="bt_classify_name_empty" style="visibility: hidden"></button><button class="bt_classify_name_empty" style="visibility: hidden"></button><button class="bt_classify_name_empty" style="visibility: hidden"></button><button class="bt_classify_name_empty" style="visibility: hidden"></button></div>按照上面我弄的這樣,就可以搞定了,重要:空白的高度一定要給0px,如果你給了高度,就會出現如下問題:
效果:
總結
以上是生活随笔為你收集整理的flex平均分布换行后自动对齐的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 微软改进 Win11 开始菜单的推荐功能
- 下一篇: 我国团队研制出纳米探针,借助手机实现农药