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:计算核心的逻辑如下:
父元素的宽度 - ( 子元素单个宽度 * 子元素的数量 ) / 子元素的数量 / 左右俩边的间距

相关推荐
IT_陈寒15 分钟前
Java性能优化:从这8个关键指标开始,让你的应用提速50%
前端·人工智能·后端
天生我材必有用_吴用17 分钟前
Vue3+Node.js 实现大文件上传:断点续传、秒传、分片上传完整教程(含源码)
前端
摸鱼的春哥33 分钟前
前端程序员最讨厌的10件事
前端·javascript·后端
牧羊狼的狼5 小时前
React 中的 HOC 和 Hooks
前端·javascript·react.js·hooks·高阶组件·hoc
知识分享小能手6 小时前
React学习教程,从入门到精通, React 属性(Props)语法知识点与案例详解(14)
前端·javascript·vue.js·学习·react.js·vue·react
魔云连洲6 小时前
深入解析:Vue与React的异步批处理更新机制
前端·vue.js·react.js
mCell7 小时前
JavaScript 的多线程能力:Worker
前端·javascript·浏览器
超级无敌攻城狮8 小时前
3 分钟学会!波浪文字动画超详细教程,从 0 到 1 实现「思考中 / 加载中」高级效果
前端
excel9 小时前
用 TensorFlow.js Node 实现猫图像识别(教学版逐步分解)
前端
gnip9 小时前
JavaScript事件流
前端·javascript