css里flex+margin布局

css里flex+margin布局

在flex+margin的布局中,margin设置auto会自动将元素剩余的空间用margin填满

居中

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>居中</title>
  <style>
      * {
          margin: 0;
          padding: 0;
      }
      .container {
          height: 500px;
          display: flex;
          border: 2px solid red;
          box-sizing: border-box;
      }
      .item {
          width: 100px;
          height: 100px;
          line-height: 100px;
          text-align: center;
          background-color: #ccc;
      }
      .item {
          margin: auto;
      }
  </style>
</head>
<body>
<div class="container">
  <div class="item">1</div>
</div>
</body>
</html>

两端排列

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>两端排列</title>
  <style>
      * {
          margin: 0;
          padding: 0;
      }
      .container {
          display: flex;
          border: 2px solid red;
          box-sizing: border-box;
      }
      .item {
          width: 100px;
          height: 100px;
          line-height: 100px;
          text-align: center;
          background-color: #ccc;
      }
      .item:nth-child(3) {
          margin-left: auto;
      }
  </style>
</head>
<body>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>
</body>
</html>

依次排列

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>依次排列</title>
  <style>
      * {
          margin: 0;
          padding: 0;
      }
      .container {
          display: flex;
          flex-wrap: wrap;
          border: 2px solid red;
          box-sizing: border-box;
      }
      .item {
          width: 100px;
          height: 100px;
          line-height: 100px;
          text-align: center;
          background-color: #ccc;
      }
      .container .item {
          --n: 10;
          /* 计算得出左右两边的间距:元素剩余的空间 / 元素个数 / 2 */
          --gap: calc((100% - 100px * var(--n)) / var(--n) / 2);
          margin: 20px var(--gap);
      }
  </style>
</head>
<body>
<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
  <div class="item">9</div>
  <div class="item">10</div>
  <div class="item">11</div>
  <div class="item">12</div>
  <div class="item">13</div>
  <div class="item">14</div>
  <div class="item">15</div>
  <div class="item">16</div>
  <div class="item">17</div>
  <div class="item">18</div>
  <div class="item">19</div>
  <div class="item">20</div>
  <div class="item">21</div>
  <div class="item">22</div>
</div>
</body>
</html>
相关推荐
火车叼位3 分钟前
GSAP 动画开发者的终极利器:像素化风格 API 速查表
前端
袁煦丞23 分钟前
全球热点一键抓取!NewsNow:cpolar内网穿透实验室第630个成功挑战
前端·程序员·远程工作
qq_4591317026 分钟前
前端面试问题
前端
拾光拾趣录1 小时前
从“祖传”构造函数到 `class`
前端·javascript
wmm_会飞的@鱼1 小时前
FlexSim-汽车零部件仓库布局优化与仿真
服务器·前端·网络·数据库·数学建模·汽车
yvvvy1 小时前
从“按钮都不会点”到“能撸大厂 UI”:我用 react-vant 踢开组件库的大门!
前端·javascript
安然dn1 小时前
Cropper.js:JS图像裁剪库
前端·javascript
Serendipity2611 小时前
微服务架构
前端·微服务
Hilaku1 小时前
深入background-image:你可能不知道的几个性能优化与高级技巧
前端·css
南岸月明1 小时前
副业自媒体1年终于明白:为什么会表达的人,能量越来越强,更能赚到钱?
前端