摘要:實現的方法有很多,我們這里要討論的是如何簡潔地使用布局來實現我這里采用的方法是使用自動的外邊距在主軸上對齊。這很好理解自動外邊距將平分全部的剩余空間。下面就來嘗試下這個方案吧,代碼如下然后看一下效果貌似有點不對。
問題描述
先來看一個需求場景:
上圖中需要實現在水平方向上子元素之間、子元素和父容器邊框之間的間距要相等。
實現的方法有很多,我們這里要討論的是:如何簡潔地使用 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
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53912.html
摘要:實現的方法有很多,我們這里要討論的是如何簡潔地使用布局來實現我這里采用的方法是使用自動的外邊距在主軸上對齊。這很好理解自動外邊距將平分全部的剩余空間。下面就來嘗試下這個方案吧,代碼如下然后看一下效果貌似有點不對。 問題描述 先來看一個需求場景: showImg(https://segmentfault.com/img/bVbs138?w=1320&h=446); 上圖中需要實現在水平方...
摘要:布局涉及到的屬性常用屬性值此元素不會被顯示它和屬性不一樣。當所有父元素中的所有元素脫離文檔流之后,父元素將失去原有默認的內容高度浮動塌陷配合使用屬性規定元素的哪一側不允許其他浮動元素。 @(CSS技巧)[CSS, 布局] 深入學習CSS布局系列(一)布局常用屬性 一直感覺自己對CSS的各個屬性很了解,可是在前幾天一次面試后發現自己真的很多地方感覺自己知道,可是實際上自己并不是真的理解了...
摘要:同時定義了伸縮容器的主軸和側軸。伸縮項目向一行的中間位置靠齊。伸縮項目會平均地分布在行里。伸縮項目的外邊距盒在該行的側軸上居中放置。默認值伸縮項目拉伸填充整個伸縮容器。主要用來決定伸縮容器剩余空間按比例應擴展多少空間。 flexbox 研究 研究flexbox需要清楚一個概念,主軸和交叉軸的概念,而這兩個軸是可以交換的 flexbox的樣式屬性主要作用于兩個部分,一個是伸縮容器,一個是...
閱讀 2779·2021-10-14 09:42
閱讀 834·2021-10-11 10:57
閱讀 780·2019-08-30 15:54
閱讀 1923·2019-08-30 13:50
閱讀 1691·2019-08-30 11:19
閱讀 938·2019-08-29 12:38
閱讀 1429·2019-08-26 11:51
閱讀 1398·2019-08-26 10:48
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要