国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

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

Travis / 3227人閱讀

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

問題描述

先來看一個需求場景：

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

實現(xiàn)的方法有很多，我們這里要討論的是：如何簡潔地使用 Flex 布局來實現(xiàn)？
我這里采用的方法是：使用自動的外邊距在主軸上對齊。

自動的外邊距在主軸上對齊

我們先來看一下 MDN 關(guān)于這個的解釋：

... 自動的外邊距會占據(jù)全部的多余的空間——在一個塊上設(shè)置自動的左右外邊距可以使它居中。兩邊盡可能占據(jù)多的空間，塊就被置于中間位置了。

這很好理解：自動外邊距將平分全部的剩余空間。下面就來嘗試下這個方案吧，代碼如下：


  
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;
}

然后看一下效果：

貌似有點(diǎn)不對。仔細(xì)看看子元素之間的間距比到邊框的大，大概是子元素到邊框的兩倍，跟我們預(yù)期的效果有差異。
按照 MDN 的解釋來看，自動的外邊距會等分剩余空間，但為什么會出現(xiàn)上圖的情況呢？下面來談一下我的理解。

主軸剩余空間“分配權(quán)重”與子元素自動外邊距的關(guān)系

這個分配權(quán)重關(guān)系沒有在 MDN 上找到相關(guān)解釋，純粹是個人見解，我們可以這樣來理解：

如果一個子元素在主軸的一個區(qū)域（或方向）上聲明了 margin-*: auto，那么這個空間的分配權(quán)重 + 1

如果另外一個子元素也在同樣的區(qū)域（或方向）上有自動外邊距的聲明，那么分配權(quán)重再 + 1

在這些聲明了自動外邊距的區(qū)域上，剩余空間根據(jù)分配權(quán)重來劃分間距大小

首先，這個理解顯然是可以滿足 MDN 上的解釋。然后我們再來看看上圖的情況怎么解釋：

我們把 子元素1 的左邊區(qū)域命名為 間距區(qū)域1，子元素1 的右邊區(qū)域命名為 間距區(qū)域2

子元素1 的左邊和右邊都有自動外邊距，那么 間距區(qū)域1的權(quán)重 = 1，間距區(qū)域2的權(quán)重 = 1

子元素2 的左邊和右邊都有自動外邊距，那么 間距區(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ù)這種理解我們來調(diào)整下代碼，只需要在每個相隔的區(qū)域上聲明一次自動外邊距就好了：

首先我們把 .item 這個樣式上的 margin 去掉

然后只在 html 的 子元素1 和 子元素3 上設(shè)置 style="margin: 0 auto"

調(diào)整后如下：


  
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，問題解決了
根據(jù)這個理解還有一種設(shè)置也可以達(dá)到同樣效果：


  
1

  
2

  
3

以上代碼已放到 codepen 上：https://codepen.io/deepfunc/pen/BembyQ

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/114705.html

相關(guān)文章

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

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

    wqj97 評論0 收藏0

  • 深入學(xué)習(xí)CSS布局系列（一）布局常用屬性

    摘要：布局涉及到的屬性常用屬性值此元素不會被顯示它和屬性不一樣。當(dāng)所有父元素中的所有元素脫離文檔流之后，父元素將失去原有默認(rèn)的內(nèi)容高度浮動塌陷配合使用屬性規(guī)定元素的哪一側(cè)不允許其他浮動元素。 @(CSS技巧)[CSS, 布局] 深入學(xué)習(xí)CSS布局系列（一）布局常用屬性 一直感覺自己對CSS的各個屬性很了解，可是在前幾天一次面試后發(fā)現(xiàn)自己真的很多地方感覺自己知道，可是實際上自己并不是真的理解了...

    Noodles 評論0 收藏0

  • 面試--css面試

    摘要：怪異的盒模型和標(biāo)準(zhǔn)瀏覽器的盒模型，可以通過屬性控制兩種盒模型的變化屬性值這個屬性值和是的盒模型是有關(guān)系的。簡便完整響應(yīng)式地實現(xiàn)各種頁面布局提出了布局。交叉軸的起點(diǎn)對齊。 1、css盒模型 css的盒模型包括：content+padding+border+margin同時值得注意的是：css 的外邊距會在垂直方向合并。 兩個上下方向相鄰的塊元素框垂直相遇時，外邊距會合并，合并后的外邊距...

    sPeng 評論0 收藏0

  • flexbox 伸縮布局

    摘要：同時定義了伸縮容器的主軸和側(cè)軸。伸縮項目向一行的中間位置靠齊。伸縮項目會平均地分布在行里。伸縮項目的外邊距盒在該行的側(cè)軸上居中放置。默認(rèn)值伸縮項目拉伸填充整個伸縮容器。主要用來決定伸縮容器剩余空間按比例應(yīng)擴(kuò)展多少空間。 flexbox 研究 研究flexbox需要清楚一個概念，主軸和交叉軸的概念，而這兩個軸是可以交換的 flexbox的樣式屬性主要作用于兩個部分，一個是伸縮容器，一個是...

    darcrand 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<