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

相关推荐
excel13 小时前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel15 小时前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼16 小时前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping16 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙17 小时前
[译] Composition in CSS
前端·css
白水清风17 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix17 小时前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户221520442780017 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端17 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧17 小时前
Promise 的使用
前端·javascript