有關(guān)flex布局子項(xiàng)padding問(wèn)題

父容器

<div class="father"></div>
.father {
    display: flex;
    width: 400px;
    height: 100px;
}

子容器

<div class="child">1</div>
<div class="child child-2">2</div>
<div class="child">3</div>
<div class="child">4</div>
.child {
    flex: 1;
    border: 1px solid black;
}
.child-2 {
    padding-left: 10px
}

結(jié)果

期望的結(jié)果

四個(gè)child寬度： (400 / 4)px; 第二個(gè)child的padding-left為10px；

實(shí)際結(jié)果

第二個(gè)child：(400 - 10) / 4 + 10 = 107.5px
其他三個(gè)child (400 - 10） / 4 = 97.5px

問(wèn)題

為什么會(huì)出現(xiàn)這種結(jié)果？
當(dāng)父級(jí)寬度不知的情況下，那我如何實(shí)現(xiàn)使用flex布局實(shí)現(xiàn)子項(xiàng)大小一樣，各自邊距不同的情景？

對(duì)于問(wèn)題2，自己有一個(gè)方案是為child添加一個(gè)子項(xiàng) 寬、高為100%，為其添加樣式；不過(guò)這樣dom層級(jí)就變深了；

回答

編輯回答

凹凸曼

以下為個(gè)人理解:
1.子項(xiàng)目設(shè)置了flex: 1; 即flex-grow, flex-shrink 和 flex-basis的值分別為1, 1, auto。flex-basis不使用 box-sizing 來(lái)改變盒模型的話，那么這個(gè)屬性就決定了元素的內(nèi)容盒（content-box）的寬。所以, 子項(xiàng)目初始大小會(huì)是這樣的:
圖片描述

flex-grow, flex-shrink為1時(shí), 表示若父容器有剩余空間時(shí)，等比例瓜分剩余空間，剩余空間不足時(shí)（不換行），等比例縮小子項(xiàng)目。所以效果就是第二個(gè)項(xiàng)目多出了10px

2.父級(jí)寬度不知的情況下，那我如何實(shí)現(xiàn)使用flex布局實(shí)現(xiàn)子項(xiàng)大小一樣，各自邊距不同的情景？
要實(shí)現(xiàn)子項(xiàng)目大小一樣, 則必須保證flex-basis得到算出的寬度一致, 然后瓜分到的剩余空間一致. 我的解決方案是設(shè)置box-sizing: border-box; 然后flex-basis設(shè)置一個(gè)值(這里的話我會(huì)設(shè)置成25%)

2018年8月27日 13:13