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

最新推荐文章于 2023-11-22 12:38:35 发布

原创最新推荐文章于 2023-11-22 12:38:35 发布 · 6.6k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#flexbox #html5 #css

本文介绍了如何通过CSS弹性布局实现不固定宽度的子元素并排显示，以适应不同设备和浏览器，提供良好的用户体验。通过设置`display: flex`，`justify-content: space-around`等属性，可以轻松创建响应式的多列布局，确保在PC和手机端都能完美展示。

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