柔性盒和填充？

Question

我讀過這個SO pos t並實現了它的建議。

下面我的代碼。

基本上，當我向我的flex孩子添加填充物時，它會伸展得比應該寬，兩個框（金色和灰色）的寬度應該相同，但大量的填充會使金色框稍微較大，因此忽略了其50％的基礎。

爲什麼會發生這種情況，它如何解決？我期待兩個盒子的寬度相同，即使是填充也是如此。

.container { 
 
    display: flex; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 

 
.one { 
 
    background: gold; 
 
    box-sizing: border-box; 
 
    flex: 1 0 50%; 
 
    padding: 1em 15em; 
 
} 
 

 
.two { 
 
    background: grey; 
 
    flex: 1 0 50%; 
 
}

<div class="container"> 
 
    <div class="one"> 
 
    one asfu adfhu sufdhu sudhfu suadhf usdhf hus fds 
 
    </div> 
 
    <div class="two"> 
 
    two 
 
    </div> 
 
</div>

Answer 1

請在你的代碼的一些變化。將文本放在一個p元素中併爲其添加一些css。

的HTML

<div class="container"> 
    <div class="one"> 
    <p>one asfu adfhu sufdhu sudhfu suadhf usdhf hus fds</p> 
    </div> 
    <div class="two"> 
    two 
    </div> 
</div> 

的CSS

.container { 
    display: flex; 
    height: 300px; 
    width: 100%; 
} 
.one { 
    background: gold; 
    min-width:50%; 
    display:flex; 
    align-items:center; 
    justify-content:center; 
} 
.two { 
    background: grey; 
    min-width:50%; 
} 
p { 
    background:red; 
    padding: 1em 5em; 
    max-width:50px; 
} 

鏈接擺弄https://jsfiddle.net/ap53a3rw/1/

Answer 2

單位em是相對於字體大小，你可以閱讀here：

EM：相對於元素的字體大小（2em的表示當前字體的2倍大小 ）

而且，由於字體大小是固定的，因此填充的值將是絕對的而不是相對的。你可以改變容器的字體大小，你會注意到不同之處。在你的情況下，第一個箱子佔用了更多的空間，因爲填充剩餘的和的填充總和超過了容器寬度的50％。

在下面我的示例固定字體大小爲10px的所以填充值​​將是埃加勒到：10px的150像素這意味着你有一個總300像素填充將被計入的寬度。

• 假設現在你有1600像素一個屏幕，然後50％= 800像素，你的箱子 有300像素多。在這種情況下，它應該可以，因爲你的盒子可以裝入50％。

• 假設現在你有500像素一個屏幕，你的盒子將不得不 採取比其50％以上（250像素），因爲他至少有填充的300像素 。

在你的情況下，當你使用16px的默認字體大小值時，該框會變大。

.container { 
 
    display: flex; 
 
    height: 100px; 
 
    width: 100%; 
 
    font-size:10px; 
 
} 
 

 
.one { 
 
    background: gold; 
 
    box-sizing: border-box; 
 
    flex: 1 0 50%; 
 
    padding: 1em 15em; 
 
} 
 

 
.two { 
 
    background: grey; 
 
    flex: 1 0 50%; 
 
}

<div class="container"> 
 
    <div class="one"> 
 
    one asfu adfhu sufdhu sudhfu suadhf usdhf hus fds 
 
    </div> 
 
    <div class="two"> 
 
    two 
 
    </div> 
 
</div>

所以下面這個解釋你的代碼是一樣的：

.one { 
    background: gold; 
    box-sizing: border-box; 
    flex: 1 0 50%; 
    padding: 16px 240px; 
} 

我相信，如果你寫這樣你就會明白，爲什麼你有這樣的問題。

---

爲了避免這種情況你可以使用%這是相對於寬度和你不會鬆動的50％的比例/ 50％：

.container { 
 
    display: flex; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 

 
.one { 
 
    background: gold; 
 
    box-sizing: border-box; 
 
    flex: 1 0 50%; 
 
    padding: 1% 15%; 
 
} 
 

 
.two { 
 
    background: grey; 
 
    flex: 1 0 50%; 
 
}

<div class="container"> 
 
    <div class="one"> 
 
    one asfu adfhu sufdhu sudhfu suadhf usdhf hus fds 
 
    </div> 
 
    <div class="two"> 
 
    two 
 
    </div> 
 
</div>

Answer 3

一個更大的填充量當然會試圖在盒子內獲得一些空間。讓我解釋一下我對它的看法。

在你的小提琴中，每個盒子的孩子（我們稱之爲細胞）獲得50％的屏幕寬度。你已經在單元格的每一邊提供了15em的水平填充。將單元格的box-sizing設置爲border-box將使它們不會將填充添加到它們的淨寬度，總之，您可以避免使用它的大小問題。

那麼爲什麼金盒佔用較大的尺寸？因爲，填充15em是一個很大的數字。你將無法看到它在更大的屏幕上佔據更大的尺寸，因爲15em可以很容易地在那裏調整。我認爲你需要把15em縮小到更小的屏幕。

下面是一個例子：

/* Box-sizing reset */ 
 
*, 
 
*:after, 
 
*:before { 
 
    box-sizing: border-box; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    height: 100px; 
 
    width: 100%; 
 
} 
 

 
.one { 
 
    background: gold; 
 
    flex: 1 0 50%; 
 
    padding: 1em 2.5em; 
 
} 
 

 
.two { 
 
    background: grey; 
 
    flex: 1 0 50%; 
 
} 
 

 
@media only screen and (min-width: 1024px) { 
 
    /* Larger padding for `.one` on bigger screens */ 
 
    .one { 
 
    padding: 1em 15em; 
 
    } 
 
}

<div class="container"> 
 
    <div class="one"> 
 
    one asfu adfhu sufdhu sudhfu suadhf usdhf hus fds 
 
    </div> 
 
    <div class="two"> 
 
    two 
 
    </div> 
 
</div>

上面，我所做的水平填充的.one較小，使用的box-sizing reset，並增加了一個媒體查詢更大的屏幕，顯示更大的填充。

希望它有幫助。