在一行中实现每个盒子间隔相等

达成效果:

1. 使用justify-content: space-evenly;

javascript 复制代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex evenly</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      display: flex;
      justify-content: space-evenly;
      width: 700px;
      height: 400px;
      margin: 100px auto;
      background-color: #ccc;
    }
    
    .item {
      width: 140px;
      height: 120px;
      background-color: #368;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>

缺点:苹果的兼容性不好,推荐以下方法

2. space-between配合before+after实现space-evenly效果

javascript 复制代码
<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>flex evenly兼容</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      display: flex;
      justify-content: space-between;
      width: 600px;
      height: 400px;
      margin: 100px auto;
      background-color: #ccc;
    }

    .wrap:before,
    .wrap:after {
     /* 用空内容来占位达到效果 */
      content: ''; 
    }

    .item {
      width: 140px;
      height: 120px;
      background-color: #368;
    }
  </style>
</head>

<body>
  <div class="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</body>
</html>
相关推荐
程序员二师兄5 分钟前
记一次鸿蒙webview图片渲染失败的问题
前端·javascript·harmonyos
萌萌哒草头将军5 分钟前
字节也在用的 @tanstack/react-query 到底有多好用!🔥🔥🔥
前端·javascript·react.js
JohnYan20 分钟前
工作笔记 - 改进的单例应用
javascript·设计模式·bun
鹧鸪yy27 分钟前
从Token介绍到单点登录SSO
前端·javascript
一块plus1 小时前
创造 Solidity、提出 Web3 的他回来了!Gavin Wood 这次将带领波卡走向何处?
javascript·后端·面试
老虎06271 小时前
JavaWeb前端03(Ajax概念及在前端开发时应用)
前端·javascript·ajax
小鸡脚来咯1 小时前
react速成
前端·javascript·react.js
剽悍一小兔1 小时前
React15.x版本 子组件调用父组件的方法,从props中拿的,这个方法里面有个setState,结果调用报错
前端·javascript·react.js
神笔码农nice1 小时前
VUE从入门到精通二:ref、reactive、computed计算属性、watch监听、组件之间的通信
前端·javascript·vue.js
狂炫一碗大米饭2 小时前
每个前端开发人员都应该知道的 6 大 CSS 框架
css·scss