博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
实用的 Web 布局技巧:Flex 主轴上的自动外边距
阅读量:6598 次
发布时间:2019-06-24

本文共 1998 字,大约阅读时间需要 6 分钟。

问题描述

先来看一个需求场景:

上图中需要实现在水平方向上子元素之间、子元素和父容器边框之间的间距要相等。

实现的方法有很多,我们这里要讨论的是:如何简洁地使用 Flex 布局来实现?我这里采用的方法是:使用自动的外边距在主轴上对齐。

这篇主要讲解外边距的应用,不用 justify-content: space-evenly; 来实现。

自动的外边距在主轴上对齐

我们先来看一下 关于这个的解释:

... 自动的外边距会占据全部的多余的空间——在一个块上设置自动的左右外边距可以使它居中。两边尽可能占据多的空间,块就被置于中间位置了。

这很好理解:自动外边距将平分全部的剩余空间。下面就来尝试下这个方案吧,代码如下:

1
2
3
复制代码
.container {  display: flex;  align-items: center;  box-sizing: border-box;  border: 2px dashed #7cb305;  width: 600px;  height: 200px;  margin: auto;}.item {  display: flex;  justify-content: center;  align-items: center;  margin: 0 auto;  width: 100px;  height: 100px;  background: #722ed1;  border-radius: 50%;  color: #fff;  font-size: 22pt;}复制代码

然后看一下效果:

貌似有点不对。仔细看看子元素之间的间距比到边框的大,大概是子元素到边框的两倍,跟我们预期的效果有差异。 按照 MDN 的解释来看,自动的外边距会等分剩余空间,但为什么会出现上图的情况呢?下面来谈一下我的理解。

主轴剩余空间“分配权重”与子元素自动外边距的关系

这个分配权重关系没有在 MDN 上找到相关解释,纯粹是个人见解,我们可以这样来理解:

  • 如果一个子元素在主轴的一个区域(或方向)上声明了 margin-*: auto,那么这个空间的分配权重 + 1
  • 如果另外一个子元素也在同样的区域(或方向)上有自动外边距的声明,那么分配权重再 + 1
  • 在这些声明了自动外边距的区域上,剩余空间根据分配权重来划分间距大小

首先,这个理解显然是可以满足 MDN 上的解释。然后我们再来看看上图的情况怎么解释:

  • 我们把 子元素1 的左边区域命名为 间距区域1子元素1 的右边区域命名为 间距区域2
  • 子元素1 的左边和右边都有自动外边距,那么 间距区域1的权重 = 1间距区域2的权重 = 1
  • 子元素2 的左边和右边都有自动外边距,那么 间距区域2的权重 = 1 + 1 = 2
  • 最后 间距区域1的权重间距区域1的权重 就是 1:2 的关系
  • 其他区域依次类推,最后根据权重划分间距区域大小

然后依据这种理解我们来调整下代码,只需要在每个相隔的区域上声明一次自动外边距就好了:

  • 首先我们把 .item 这个样式上的 margin 去掉
  • 然后只在 html 的 子元素1子元素3 上设置 style="margin: 0 auto"

调整后如下:

1
2
3
复制代码
.container {  display: flex;  align-items: center;  box-sizing: border-box;  border: 2px dashed #7cb305;  width: 600px;  height: 200px;  margin: auto;}.item {  display: flex;  justify-content: center;  align-items: center;  width: 100px;  height: 100px;  background: #722ed1;  border-radius: 50%;  color: #fff;  font-size: 22pt;}复制代码

OK,问题解决了。根据这个理解还有一种设置也可以达到同样效果:

1
2
3
复制代码

以上代码已放到 codepen 上:

转载于:https://juejin.im/post/5d06fd846fb9a07eac05d2d4

你可能感兴趣的文章
Scrum Master的成功定义是什么?
查看>>
Windows Server入门系列37 创建网络共享
查看>>
自己diy封装xp操作系统
查看>>
veritas升级及备份至磁盘两个问题简要说明
查看>>
Scoket:UDP通讯模型
查看>>
扯点关于经济的淡-贸易顺差都是有利的吗
查看>>
国产IT厂商激辩微软 微软反垄断调查或有突破
查看>>
《进化——我们在互联网上奋斗的故事》一一1.4 从精兵到强将 ——技术人员的职场发展之路...
查看>>
通过 LLVM 在 Android 上运行 Swift 代码
查看>>
《C程序员从校园到职场》一第2章 学校到职场2.1 认清自身不足
查看>>
ant打jar包
查看>>
CISCO交换机密码恢复
查看>>
Linux/Unix的精巧约定两例及其简析:目录权限和文本行数
查看>>
WebDAV助手1.1.0更新
查看>>
微服务事务处理
查看>>
【linux】 linux gpio操作
查看>>
【linux kernel】 softirq 软中断讨论
查看>>
2019武汉大学数学专业考研真题(回忆版)
查看>>
百度地图车辆运动轨迹
查看>>
文本与字体
查看>>