实用的 Web 布局技巧：Flex 主轴上的自动外边距

wqj97 发布于2019-08-02 15:07 / 716人阅读

摘要：实现的方法有很多，我们这里要讨论的是如何简洁地使用布局来实现我这里采用的方法是使用自动的外边距在主轴上对齐。这很好理解自动外边距将平分全部的剩余空间。下面就来尝试下这个方案吧，代码如下然后看一下效果貌似有点不对。

问题描述

先来看一个需求场景：

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

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

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

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

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

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


  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://codepen.io/deepfunc/pen/BembyQ

GPU云服务器云服务器 html 的外边距外边距重叠 html外边距上下 html外边距颜色

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53912.html

实用的 Web 布局技巧：Flex 主轴上的自动外边距

摘要：实现的方法有很多，我们这里要讨论的是如何简洁地使用布局来实现我这里采用的方法是使用自动的外边距在主轴上对齐。这很好理解自动外边距将平分全部的剩余空间。下面就来尝试下这个方案吧，代码如下然后看一下效果貌似有点不对。问题描述先来看一个需求场景： showImg(https://segmentfault.com/img/bVbs138?w=1320&h=446); 上图中需要实现在水平方...

Travis 2019-08-30 11:00 评论0 收藏0
深入学习CSS布局系列（一）布局常用属性

摘要：布局涉及到的属性常用属性值此元素不会被显示它和属性不一样。当所有父元素中的所有元素脱离文档流之后，父元素将失去原有默认的内容高度浮动塌陷配合使用属性规定元素的哪一侧不允许其他浮动元素。 @(CSS技巧)[CSS, 布局] 深入学习CSS布局系列（一）布局常用属性一直感觉自己对CSS的各个属性很了解，可是在前几天一次面试后发现自己真的很多地方感觉自己知道，可是实际上自己并不是真的理解了...

Noodles 2019-08-30 12:53 评论0 收藏0
面试--css面试

摘要：怪异的盒模型和标准浏览器的盒模型，可以通过属性控制两种盒模型的变化属性值这个属性值和是的盒模型是有关系的。简便完整响应式地实现各种页面布局提出了布局。交叉轴的起点对齐。 1、css盒模型 css的盒模型包括：content+padding+border+margin同时值得注意的是：css 的外边距会在垂直方向合并。两个上下方向相邻的块元素框垂直相遇时，外边距会合并，合并后的外边距...

sPeng 2019-08-30 15:53 评论0 收藏0
flexbox 伸缩布局

摘要：同时定义了伸缩容器的主轴和侧轴。伸缩项目向一行的中间位置靠齐。伸缩项目会平均地分布在行里。伸缩项目的外边距盒在该行的侧轴上居中放置。默认值伸缩项目拉伸填充整个伸缩容器。主要用来决定伸缩容器剩余空间按比例应扩展多少空间。 flexbox 研究研究flexbox需要清楚一个概念，主轴和交叉轴的概念，而这两个轴是可以交换的 flexbox的样式属性主要作用于两个部分，一个是伸缩容器，一个是...

darcrand 2019-08-29 12:29 评论0 收藏0