html如何取消盒子间的间隔,使用flexbox时，多行子元素之间的间距如何控制？
生活随笔
收集整理的這篇文章主要介紹了
html如何取消盒子间的间隔,使用flexbox时，多行子元素之间的间距如何控制？
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2016-07-06 19:34 update
other.wrap {
border:1px solid #ccc;
padding: 20px;
}
.flex{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
align-content: flex-start;
justify-content: space-between;
margin-bottom: -50px; /* 注意 */
}
.flex-item{
width: 250px;
border:1px solid #f00;
margin-bottom: 50px; /* 注意 */
}
.item1{ height: 20px; }
.item2{ height:100px; }
.item3{ height: 40px; }
.item4{ height: 200px; }
給 .flex-item 設置 margin-bottom，
然后給容器(.flex)設置負的 margin-bottom 來把最下面一行多余的 margin 給抵消。
這樣就行了。
總結
以上是生活随笔為你收集整理的html如何取消盒子间的间隔,使用flexbox时，多行子元素之间的间距如何控制？的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 一汽丰田首款纯电动车型 bZ4X 限时直
- 下一篇： 微型计算机及接口技术笔记,微机原理与接口