css技巧之等间距布局
1. 开局⼀张图，内容全靠编
若是普通的css添加左右margin，则红⾊盒⼦之间的距离会⽐红⾊盒⼦与⽗元素的距离⼤两倍。
若是只添加左边距，则最右边的红⾊盒⼦和⽗元素贴在⼀起了。其实这⾥可以另外给⽗元素添加内边距，但是这样要确定红⾊盒⼦数量和margin的⼤⼩
2. flex+js响应式解决等间距布局
解决这个布局的前提是：
⼦元素即红⾊盒⼦的宽度是固定的
⼦元素的margin⼤于15px(这个⾃⼰定)
⽗元素的宽度是响应式的变化，所以每⾏的盒⼦数、margin也是响应式的
⽅法：
⽗元素宽度=⼦元素 x 个数 + ⼦元素margin x (个数+1)，然后给⼦元素添加左margin，因此，⼀⾏中剩余的空间就是最右边的margin，不⽤特意设置，直接在⽗元素⽤⼀个flex-wrap换⾏，第⼀⾏中放不下，⾃然就转到下⼀⾏。
//html
<section></section>
//css
section{
width: 100%;
border: 1px #000 solid;
margin: 100px auto;
display: flex;
flex-wrap: wrap;
}
.item{
width: 100px;
height: 100px;
background-color: red;
}
//js
//创建⼦元素
let con = ElementsByTagName('section')[0];
for (var i = 0; i < 20; i++) {
let item = ateElement('div');
item.className = 'item';
con.appendChild(item);
}
size();
//定义布局⽅式
function size(){
let conWidth = con.clientWidth,
itemWidth = ElementsByClassName('item')[0].clientWidth, itemNum = Math.floor(conWidth/itemWidth),
itemMargin = (conWidth - itemNum*itemWidth)/(itemNum + 1),
itemList = ElementsByClassName('item');
//margin⼩于15时，每⾏的盒⼦数量减1
if (itemMargin < 15) {
itemNum-=1;
css布局左边固定右边自适应
itemMargin = (conWidth - itemNum*itemWidth)/(itemNum + 1)
}
[...itemList].forEach(function(i){
i.style.marginLeft = `${itemMargin}px`;
i.style.marginBottom = `${itemMargin}px`;
//console.log(conWidth);
})
}
//页⾯宽度发⽣变化时，重新调⽤，达到响应式的⽬的
size();
}
复制代码

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。