我一直在玩 flex-box 并試圖了解它是如何作業的。我注意到 flex-container 的 % 寬度會縮小其內容，但是如果我為 flex-basis 交換寬度，它會覆寫百分比并阻止它縮小超過其內容。請參閱下面的示例并將“寬度”替換為“flex-basis”：
<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 2px;
padding: 2px;
font-size: 30px;
width: 20%;
}
</style>
</head>
<body>
<h1>Create a Flex Container</h1>
<div class="flex-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>
<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>
<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>
</body>
</html>據我所知 min-width: auto 屬性應該啟動并防止 flex-item 收縮超過其 min-content 但這僅適用于 flex-basis 而不是寬度，即使 min-width 應該覆寫兩個都。有人可以解釋一下這里發生了什么嗎？我錯過了什么嗎？
uj5u.com熱心網友回復：
要理解這一點，您需要考慮兩個概念：“彈性基本尺寸”和“主要尺寸”。
解釋起來有點棘手，但是如果您參考規范中的完整演算法，您會注意到我們首先計算“flex base size”，然后我們計算“hypotential main size”，即最終大小。
對于“假設的主要尺寸”：
的假想主尺寸是該專案的柔性基底大小根據其使用的夾緊最小和最大主尺寸（和在零地板內容框的大小）。
當您使用時，width您會影響用于定義最終寬度的“主要尺寸”（“假設的主要尺寸”）。換句話說，這不僅min-width是造成非收縮效應的原因，而且是“最小最大主要尺寸”。
這是另一個可以更好理解的示例：
顯示代碼片段
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container>div {
background-color: #f1f1f1;
margin: 2px;
padding: 2px;
font-size: 30px;
flex-basis: 20%;
width: 40px;
}<div class="flex-container">
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
</div>在上文中，專案不能縮小過去40px的定義width。
如果您沒有定義width,min-width和max-width，瀏覽器將根據內容自動定義“最小最大電源尺寸”，但如果您給出明確的值，它們將在演算法中考慮。
這聽起來可能有點奇怪，但如果你仔細想想這是合乎邏輯的。flex-basis定義“僅”可以受其他因素影響的初始大小以定義最終大小。使用width或height我們定義尺寸時。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/396353.html