如何計算 flex 子項的 100% 寬度？

Question

當我將.sidebar寬度設置為 100% 時，它變得比以前更小。

但是，當我刪除正文的font-size: 1.3rem並切換.sidebar的width: 100%時，它會稍微變大。

我知道當我們將字體大小設置為 1.3rem 時， .primary-content的水平寬度（如果它沒有換行）應該仍然與.sidebar的寬度（如果它沒有換行）的比例相同裹）。

所以我不確定 flexbox 如何計算 width: 100%

 body { font-size: 1.3rem; } h1 { margin-top: 0; }.container { width: 80%; max-width: 1100px; margin: 0 auto; }.row { display: flex; }.primary-content { background-color: moccasin; }.sidebar { /* width: 100%; */ padding: 1em; text-align: center; color: #fff; background-color: #136c72; }

 <main class="main container row"> <section class="primary-content"> <h2>Quality designs made custom, on demand, just for you</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </section> <aside class="sidebar"> <h2>Cheap</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </aside> </main>

這是代碼筆。

https://codepen.io/Fullchee/pen/OJMBovq

Answer 1

這里都是關於初始寬度的。 為了理解這一點，我們來看另一個代碼更少的簡單示例：

 .box { display: flex; width: 50%; border: 2px solid red; margin: auto; }.box>div { border: 1px solid green; }

 <div class="box"> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur </div> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur </div> </div> <div class="box"> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur </div> <div style="width:100%;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur </div> </div>

很簡單，第二種情況看起來有點奇怪，因為寬度減少了，但這是合乎邏輯的。

首先，您應該注意到兩個元素具有相同的內容，並且內容需要包裝在每個元素中，因為沒有足夠的空間。

如果我們減少內容，它將有所不同：

 .box { display: flex; width: 50%; border: 2px solid red; margin: auto; }.box>div { border: 1px solid green; }

 <div class="box"> <div> Lorem ipsum dolor sit amet, </div> <div> Lorem ipsum dolor sit amet, </div> </div> <div class="box"> <div> Lorem ipsum dolor sit amet, </div> <div style="width:100%;"> Lorem ipsum dolor sit amet, </div> </div>

要理解這兩種情況，您需要理解我將總結為 3 點的 flexbox 算法：

1. 我們首先設置每個元素的初始寬度
2. 如果總寬度大於容器寬度，我們縮小兩個元素
3. 收縮因子考慮負自由空間（總寬度 - 容器寬度）和每個元素的寬度。

訣竅在（1）中。

沒有width:100%我們將在 (1) 中有以下內容

 $('.box div').each(function() { console.log($(this).width()); })

 .box { display: flex; width: 50%; border: 2px solid red; margin: auto; }.box>div { border: 1px solid green; flex-shrink:0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box"> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur </div> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur </div> </div>

兩個元素具有相同的寬度，因此它們將以相同的方式收縮以獲得以下內容：

 $('.box div').each(function() { console.log($(this).width()); })

 .box { display: flex; width: 50%; border: 2px solid red; margin: auto; }.box>div { border: 1px solid green; flex-shrink:1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box"> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur </div> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur </div> </div>

現在，如果您將第二個元素設置width:100% ，它將具有更小的初始寬度

 $('.box div').each(function() { console.log($(this).width()); })

 .box { display: flex; width: 50%; border: 2px solid red; margin: auto; }.box>div { border: 1px solid green; flex-shrink:0; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box"> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur </div> <div style="width:100%"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur </div> </div>

第一個幾乎是第二個的 3 倍，因此它們不會以同樣的方式收縮，最后第二個將保持較小（它將保持在幾乎小 3 倍）

 $('.box div').each(function() { console.log($(this).width()); })

 .box { display: flex; width: 50%; border: 2px solid red; margin: auto; }.box>div { border: 1px solid green; flex-shrink:1; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="box"> <div> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur </div> <div style="width:100%"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nulla nisi, accumsan vel purus nec, pretium dictum ex. Suspendisse pellentesque velit eget turpis porttitor efficitur </div> </div>

同樣的邏輯適用於您的代碼！

當使用較小的內容時，同樣的邏輯也適用，但在這種情況下width:100%可以使第二個項目的初始寬度更大，所以我們最終有一個更大的元素（就像上面的第二個片段）

---

一些相關問題，您將在其中獲得有關計算和 flexbox 算法的更多詳細信息：

如果沒有設置 flex-basis 或 width，flexbox 如何計算 flex-item 的寬度？

為什么 flex 項目限制為父級大小？

CSS 不可預知的包裹習慣

---

如果您想增加元素的寬度，可以使第一個元素縮小得更多：

 body { font-size: 1.3rem; } h1 { margin-top: 0; }.container { width: 80%; max-width: 1100px; margin: 0 auto; }.row { display: flex; }.primary-content { background-color: moccasin; }.sidebar { padding: 1em; text-align: center; color: #fff; background-color: #136c72; }

 <main class="main container row"> <section class="primary-content"> <h2>Quality designs made custom, on demand, just for you</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </section> <aside class="sidebar"> <h2>Cheap</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </aside> </main> <main class="main container row"> <section class="primary-content" style="flex-shrink:1.2;"> <h2>Quality designs made custom, on demand, just for you</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </section> <aside class="sidebar"> <h2>Cheap</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p> </aside> </main>

您還可以為兩者定義flex-shrink並確保它對於第一個元素更大：