實用的 Web 布局技巧：Flex 主軸上的自動外邊距

Travis 發布于2019-08-30 11:00 / 3222人閱讀

摘要：實現的方法有很多，我們這里要討論的是如何簡潔地使用布局來實現我這里采用的方法是使用自動的外邊距在主軸上對齊。這很好理解自動外邊距將平分全部的剩余空間。下面就來嘗試下這個方案吧，代碼如下然后看一下效果貌似有點不對。

問題描述

先來看一個需求場景：

上圖中需要實現在水平方向上子元素之間、子元素和父容器邊框之間的間距要相等。

實現的方法有很多，我們這里要討論的是：如何簡潔地使用 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外邊距顏色

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114705.html

實用的 Web 布局技巧：Flex 主軸上的自動外邊距

摘要：實現的方法有很多，我們這里要討論的是如何簡潔地使用布局來實現我這里采用的方法是使用自動的外邊距在主軸上對齊。這很好理解自動外邊距將平分全部的剩余空間。下面就來嘗試下這個方案吧，代碼如下然后看一下效果貌似有點不對。問題描述先來看一個需求場景： showImg(https://segmentfault.com/img/bVbs138?w=1320&h=446); 上圖中需要實現在水平方...

wqj97 2019-08-02 15:07 評論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