flex弹性布局实现多个div并排

多个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端

手机端：