JS编程验证flex的多列自适应布局

问题出处

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

以上每一种的兼容性都不一样。