了解屈曲成長，屈曲障礙和彈性基礎

深入理解CSS flex-grow 、 flex-shrink和flex-basis屬性的交互作用。 當我們應用CSS屬性時，幕後會發生很多事情。例如，假設我們有如下HTML：

<div>
  <div>Child</div>
  <div>Child</div>
  <div>Child</div>
</div>

然後我們編寫一些CSS：

 .parent {
  display: flex;
}

實際上，除了上面這行CSS代碼之外，我們還隱式地應用了一系列屬性到.child元素上，如同我們自己編寫了以下樣式：

 .child {
  flex: 0 1 auto; /* 默認flex值*/
}

這是因為某些屬性具有默認值，這些默認值旨在被我們覆蓋。如果不了解這些隱式應用的樣式，佈局可能會變得非常混亂且難以管理。

flex屬性是一個簡寫CSS屬性，它同時設置了三個獨立的CSS屬性。因此，上面的簡寫等同於：

 .child {
  flex-grow: 0;
  flex-shrink: 1;
  flex-basis: auto;
}

簡寫屬性將多個CSS屬性捆綁在一起，方便一次性編寫多個屬性，就像background屬性一樣。

雖然簡寫屬性可能令人困惑，但對於flexbox，建議使用簡寫形式，因為flex屬性及其子屬性之間存在復雜的交互作用。

默認樣式非常有用，因為在大多數情況下，我們不需要了解這些flexbox屬性的細節。例如，使用flexbox時，我們通常會這樣寫：

 .parent {
  display: flex;
  justify-content: space-between;
}

我們甚至不需要關心子元素或應用於它們的樣式。但這只是flexbox的冰山一角。

如果我們想深入了解flexbox，包括flex-grow 、 flex-shrink和flex-basis屬性的工作原理，以及如何利用它們創建更複雜的佈局，該如何做呢？

讓我們從簡化後的概述開始，並回到應用於子元素的默認flex屬性：

 .child {
  flex: 0 1 auto;
}

這些默認樣式告訴子元素如何拉伸和收縮。我通常將這些簡寫屬性理解為：

 /* 我在腦海中如何思考上面的規則*/

.child {
  flex: [flex-grow] [flex-shrink] [flex-basis];
}

/* 或者... */

.child {
  flex: [最大值] [最小值] [理想尺寸];
}

第一個值flex-grow默認為0，這意味著元素不會擴展（大多數情況下）。元素大小取決於其內容。例如：

 .parent {
  display: flex;
}

如果我們將flex-grow屬性的默認值從0更改為1：

 .child {
  flex: 1 1 auto;
}

那麼所有元素將平均分配.parent元素的空間，但前提是其內容長度相同。這等同於：

 .child {
  flex-grow: 1;
}

如果我們想讓其中一個元素比其他元素增長更多，我們可以這樣做：

 .child-three {
  flex: 3 1 auto;
}

/* 或者... */

.child-three {
  flex-grow: 3;
}

flex-shrink是簡寫中的第二個值：

 .child {
  flex: 0 1 auto; /* flex-shrink = 1 */
}

flex-shrink告訴瀏覽器元素的最小尺寸。默認值為1，表示始終佔用相同空間。如果將其設置為0：

 .child {
  flex: 0 0 auto;
}

則元素不會收縮。

flex-basis是默認情況下添加到flex簡寫中的最後一個值，它告訴元素保持理想大小。默認值為auto ，表示“使用我的高度或寬度”。

當我們設置flex-basis為1000px時：

 .child-three {
  flex: 0 1 1000px;
}

我們告訴瀏覽器嘗試佔用1000px的空間。如果不可能，則該元素將根據其他元素按比例佔用空間。

如果我們想阻止該元素收縮：

 .child-three {
  flex: 0 0 1000px;
}

設置flex-wrap屬性會改變佈局：

 .parent {
  display: flex;
  flex-wrap: wrap;
}

總而言之：

• 盡量使用flex簡寫。
• 使用簡寫時，記住最大值、最小值和理想尺寸。
• 元素內容也會影響這些值的工作方式。

以上是了解屈曲成長，屈曲障礙和彈性基礎的詳細內容。更多資訊請關注PHP中文網其他相關文章！