資訊專欄INFORMATION COLUMN
摘要：實(shí)現(xiàn)的方法有很多，我們這里要討論的是如何簡(jiǎn)潔地使用布局來(lái)實(shí)現(xiàn)我這里采用的方法是使用自動(dòng)的外邊距在主軸上對(duì)齊。這很好理解自動(dòng)外邊距將平分全部的剩余空間。下面就來(lái)嘗試下這個(gè)方案吧，代碼如下然后看一下效果貌似有點(diǎn)不對(duì)。
問(wèn)題描述
先來(lái)看一個(gè)需求場(chǎng)景：
上圖中需要實(shí)現(xiàn)在水平方向上子元素之間、子元素和父容器邊框之間的間距要相等。
實(shí)現(xiàn)的方法有很多，我們這里要討論的是：如何簡(jiǎn)潔地使用 Flex 布局來(lái)實(shí)現(xiàn)？
我這里采用的方法是：使用自動(dòng)的外邊距在主軸上對(duì)齊。
我們先來(lái)看一下 MDN 關(guān)于這個(gè)的解釋：
... 自動(dòng)的外邊距會(huì)占據(jù)全部的多余的空間——在一個(gè)塊上設(shè)置自動(dòng)的左右外邊距可以使它居中。兩邊盡可能占據(jù)多的空間，塊就被置于中間位置了。
這很好理解：自動(dòng)外邊距將平分全部的剩余空間。下面就來(lái)嘗試下這個(gè)方案吧，代碼如下：
123
.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;
}
然后看一下效果：
貌似有點(diǎn)不對(duì)。仔細(xì)看看子元素之間的間距比到邊框的大，大概是子元素到邊框的兩倍，跟我們預(yù)期的效果有差異。
按照 MDN 的解釋來(lái)看，自動(dòng)的外邊距會(huì)等分剩余空間，但為什么會(huì)出現(xiàn)上圖的情況呢？下面來(lái)談一下我的理解。
這個(gè)分配權(quán)重關(guān)系沒(méi)有在 MDN 上找到相關(guān)解釋，純粹是個(gè)人見(jiàn)解，我們可以這樣來(lái)理解：
如果一個(gè)子元素在主軸的一個(gè)區(qū)域（或方向）上聲明了 margin-*: auto，那么這個(gè)空間的分配權(quán)重 + 1
如果另外一個(gè)子元素也在同樣的區(qū)域（或方向）上有自動(dòng)外邊距的聲明，那么分配權(quán)重再 + 1
在這些聲明了自動(dòng)外邊距的區(qū)域上，剩余空間根據(jù)分配權(quán)重來(lái)劃分間距大小
首先，這個(gè)理解顯然是可以滿足 MDN 上的解釋。然后我們?cè)賮?lái)看看上圖的情況怎么解釋：
我們把 子元素1 的左邊區(qū)域命名為 間距區(qū)域1，子元素1 的右邊區(qū)域命名為 間距區(qū)域2
子元素1 的左邊和右邊都有自動(dòng)外邊距，那么 間距區(qū)域1的權(quán)重 = 1，間距區(qū)域2的權(quán)重 = 1
子元素2 的左邊和右邊都有自動(dòng)外邊距，那么 間距區(qū)域2的權(quán)重 = 1 + 1 = 2
最后 間距區(qū)域1的權(quán)重 和 間距區(qū)域1的權(quán)重 就是 1:2 的關(guān)系
其他區(qū)域依次類推，最后根據(jù)權(quán)重劃分間距區(qū)域大小
然后依據(jù)這種理解我們來(lái)調(diào)整下代碼，只需要在每個(gè)相隔的區(qū)域上聲明一次自動(dòng)外邊距就好了：
首先我們把 .item 這個(gè)樣式上的 margin 去掉
然后只在 html 的 子元素1 和 子元素3 上設(shè)置 style="margin: 0 auto"
調(diào)整后如下：
123
.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，問(wèn)題解決了
根據(jù)這個(gè)理解還有一種設(shè)置也可以達(dá)到同樣效果：
123
以上代碼已放到 codepen 上：https://codepen.io/deepfunc/pen/BembyQ
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/53912.html
摘要：實(shí)現(xiàn)的方法有很多，我們這里要討論的是如何簡(jiǎn)潔地使用布局來(lái)實(shí)現(xiàn)我這里采用的方法是使用自動(dòng)的外邊距在主軸上對(duì)齊。這很好理解自動(dòng)外邊距將平分全部的剩余空間。下面就來(lái)嘗試下這個(gè)方案吧，代碼如下然后看一下效果貌似有點(diǎn)不對(duì)。 問(wèn)題描述 先來(lái)看一個(gè)需求場(chǎng)景： showImg(https://segmentfault.com/img/bVbs138?w=1320&h=446); 上圖中需要實(shí)現(xiàn)在水平方...
摘要：布局涉及到的屬性常用屬性值此元素不會(huì)被顯示它和屬性不一樣。當(dāng)所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認(rèn)的內(nèi)容高度浮動(dòng)塌陷配合使用屬性規(guī)定元素的哪一側(cè)不允許其他浮動(dòng)元素。 @(CSS技巧)[CSS, 布局] 深入學(xué)習(xí)CSS布局系列（一）布局常用屬性 一直感覺(jué)自己對(duì)CSS的各個(gè)屬性很了解，可是在前幾天一次面試后發(fā)現(xiàn)自己真的很多地方感覺(jué)自己知道，可是實(shí)際上自己并不是真的理解了...
摘要：怪異的盒模型和標(biāo)準(zhǔn)瀏覽器的盒模型，可以通過(guò)屬性控制兩種盒模型的變化屬性值這個(gè)屬性值和是的盒模型是有關(guān)系的。簡(jiǎn)便完整響應(yīng)式地實(shí)現(xiàn)各種頁(yè)面布局提出了布局。交叉軸的起點(diǎn)對(duì)齊。 1、css盒模型 css的盒模型包括：content+padding+border+margin同時(shí)值得注意的是：css 的外邊距會(huì)在垂直方向合并。 兩個(gè)上下方向相鄰的塊元素框垂直相遇時(shí)，外邊距會(huì)合并，合并后的外邊距...
摘要：同時(shí)定義了伸縮容器的主軸和側(cè)軸。伸縮項(xiàng)目向一行的中間位置靠齊。伸縮項(xiàng)目會(huì)平均地分布在行里。伸縮項(xiàng)目的外邊距盒在該行的側(cè)軸上居中放置。默認(rèn)值伸縮項(xiàng)目拉伸填充整個(gè)伸縮容器。主要用來(lái)決定伸縮容器剩余空間按比例應(yīng)擴(kuò)展多少空間。 flexbox 研究 研究flexbox需要清楚一個(gè)概念，主軸和交叉軸的概念，而這兩個(gè)軸是可以交換的 flexbox的樣式屬性主要作用于兩個(gè)部分，一個(gè)是伸縮容器，一個(gè)是...
閱讀 2856·2021-10-14 09:42
閱讀 921·2021-10-11 10:57
閱讀 829·2019-08-30 15:54
閱讀 1979·2019-08-30 13:50
閱讀 1740·2019-08-30 11:19
閱讀 1019·2019-08-29 12:38
閱讀 1502·2019-08-26 11:51
閱讀 1466·2019-08-26 10:48
