问题出处
flex布局能否实现多列布局，并且每一列的宽度不定？
答案：可以实现。
以下进行验证。
实现原理
- 使用css实现多列布局
- 在input框中输入字符动态改变每一列的宽度，观看布局变化
JS部分主要实现
- 将查询到的输入框节点的类数组转成数组
- 使用数组的forEach方法为每个输入框绑定input事件
- 使用input事件监听输入，并将输入的内容放入相应列中
实现代码
由于只是验证功能，所以均未做兼容性处理
//css
.flex {
display: flex;
width: 300px;
height: 200px;
margin: 20px 0;
overflow: hidden;
border: 1px solid;
}
.box {
flex: auto;
word-break: break-word;
background-color: #74d1f7;
}
.box2 {
background-color: #96e2b8;
}
.box3 {
background-color: #ec9472;
}
//html
<input class="test" type="text" data-id="box1" autofocus>
<input class="test" type="text" data-id="box2">
<input class="test" type="text" data-id="box3">
<div class="flex">
<div class="box" id="box1"></div>
<div class="box box2" id="box2"></div>
<div class="box box3" id="box3"></div>
</div>
//js
Array.prototype.slice.call(document.querySelectorAll('.test')).forEach((item) => {
item.addEventListener('input', (e)=> {
var value = e.target.value,
id = e.target.dataset.id;
document.getElementById(id).innerHTML = value;
})
})
补充
实现多列布局的方法有多种，比如：
- 使用width:calc
- 使用font-size:0+inline-block
- position:absolute+margin
- float
以上每一种的兼容性都不一样。
