flex + margin 妙用

利用 flex + margin 分配间距,简单案例如下,先写一个包裹器,包裹几个元素:

案例一:

我们给父元素加 flex 布局,子元素加 margin: auto,可以看到子元素上下左右居中显示,当前我们可以利用给父元素 justify-content: centeralign-items: center 来实现

javascript 复制代码
.wrap {
  width: 500px;
  height: 300px;
  border: 1px #999 solid;
  display: flex;
}
.wrap .item {
	margin: auto auto
}
案例二:

但是如果我们想实现下面的布局,很显然,当前的dom结构不满足现状,需要给第二个子元素包一层出来,然后利用 flex 布局:

但是我们利用 flex + margin 可轻松实现,利用auto可自动分配空间

javascript 复制代码
.wrap .item:nth-child(1) {
    background-color: deepskyblue;
}
.wrap .item:nth-child(2) {
    margin: 0 auto; // 第二个子元素 margin
    background-color: deeppink;
}
案例三:
javascript 复制代码
.wrap .item:nth-child(1) {
    background-color: deepskyblue;
}
.wrap .item:nth-child(2) {
	margin-right: auto;
    background-color: deeppink;
}
.wrap .item:nth-child(3) {
    margin-left: auto;
    background-color: orange;
}
.wrap .item:nth-child(4) {
    background-color: limegreen;
}
案例四:
javascript 复制代码
.wrap .item:nth-child(1) {
    background-color: deepskyblue;
}
.wrap .item:nth-child(2) {
    background-color: deeppink;
}
.wrap .item:nth-child(3) {
    background-color: orange;
    margin: 0 auto;
}
.wrap .item:nth-child(4) {
    background-color: limegreen;
    margin-right: auto;
}
.wrap .item:nth-child(5) {
    background-color: mediumpurple;
}
案例五:

想实现如下布局,而且他的宽度不固定,在不同的宽度下显示的数量都是不一致的,而且空间自动分配


我们利用 flex + margin 实现,定义一个 --num变量,不同的场景,只需修改这个变量即可:

javascript 复制代码
    .wrap {
      width: 350px;
      border: 1px #999 solid;
      padding: 10px 0;
      display: flex;
      flex-wrap: wrap;
      --num: 5;
    }
    .wrap .item {
        width: 40px;
        height: 40px;
        border-radius: 1px;
        filter: drop-shadow(0 0 5px #999);
        background-color: palevioletred;
        margin: 5px calc((100% - var(--num) * 40px) / var(--num) / 2)
    }

子元素的 margin:计算核心的逻辑如下:
父元素的宽度 - ( 子元素单个宽度 * 子元素的数量 ) / 子元素的数量 / 左右俩边的间距

相关推荐
半点寒12W5 分钟前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端1 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~1 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程1 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏1 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083162 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头3 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
一只叫煤球的猫3 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim3 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim3 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron