多个div并排，在需求中很常见，简单的方法就是给每个子div定义宽度来平分父div的宽度，很显然，这个宽度的固定的，在不同的浏览器中切换很容易就出现样式的变形，造成很差的用户体验，所以才有了弹性布局。
弹性布局可以实现不用固定子div的宽度实现多个并排的效果。
定义多个div容器
<body>
<div class="flex-item">
<div class="item">
<span>请输入</span>
<input type="text">
</div>
<div class="item">
<span>请输入</span>
<input type="text">
</div>
<div class="item">
<span>请输入</span>
<input type="text">
</div>
</div>
<div class="flex-item">
<div class="item">
<span>请输入</span>
<input type="text">
</div>
<div class="item">
<span>请输入</span>
<input type="text">
</div>
<div class="item">
<span>请输入</span>
<input type="text">
</div>
</div>
<div class="flex-item">
<div class="item">
<span>请输入</span>
<input type="text">
</div>
<div class="item">
<span>请输入</span>
<input type="text">
</div>
<div class="item">
<span>请输入</span>
<input type="text">
</div>
</div>
</body>
定义flex局部的样式
<style>
.flex-item {
/* 内边距，根据需要去设置 */
padding: 20px 20px;
/* 弹性布局 */
display: flex;
/* 平分父div的宽度 */
justify-content:space-around;
background-color: rgb(115, 223, 241);
}
</style>
效果如下：
PC端
手机端：
