深入探究flexgrow

一、flexgrow作用

flex容器中，該屬性用於設置子元素的伸縮能力，即佔據容器空間時的權重。簡單來說，就是讓子元素按照一定的比例來佔據剩餘空間，以達到最優化的布局效果。

當子元素的flex-grow屬性值為0時，元素不會被拉伸，當所有元素的flex-grow屬性值相等時，它們將平分剩餘空間，而當一個元素的flex-grow屬性值為2，另一個元素的為1時，前者將佔據更多的剩餘空間。

二、flexgrow屬性題解

flex-grow有多種設置方式，具體如下：

1、flex-grow: n

將所有子元素的flex-grow屬性值設置為n，使它們平均分配剩餘空間。

.container {
  display: flex;
}
.box1 {
  flex-grow: 1;
}
.box2 {
  flex-grow: 1;
}
.box3 {
  flex-grow: 1;
}

2、flex-grow: 0

將所有子元素的flex-grow屬性值設置為0，使它們不拉伸。

.container {
  display: flex;
}
.box1 {
  flex-grow: 0;
}
.box2 {
  flex-grow: 0;
}
.box3 {
  flex-grow: 0;
}

3、flex-grow: n1;

flex-grow: n2;

將每個子元素的flex-grow屬性設置為不同的值，以佔據更多或更少的剩餘空間。

.container {
  display: flex
}
.box1 {
  flex-grow: 1
}
.box2 {
  flex-grow: 2
}
.box3 {
  flex-grow: 3
}

三、flexgrow失效

flex-grow屬性失效的常見情況有兩種：

1、子元素未設置寬度屬性

如果子元素未設置寬度屬性，則flex-grow將失效。

.container {
  display: flex;
}
.box1 {
  flex-grow: 1;
}
.box2 {
  flex-grow: 2;
}
.box3 {
  flex-grow: 3;
  width: 100px;  // 這裡設置了寬度
}

2、子元素的寬度總和等於容器寬度

如果所有子元素的寬度總和等於容器寬度，則沒有剩餘空間分配，因此flex-grow將失效。

.container {
  display: flex;
}
.box1 {
  width: 100px;
}
.box2 {
  width: 100px;
}
.box3 {
  width: 100px;
}

四、flex-flow

flex-flow是flex布局的縮寫屬性，包含flex-direction和flex-wrap兩個屬性。

1、flex-direction：該屬性用於設置主軸的方向，包括row、row-reverse、column和column-reverse。

.container {
  display: flex;
  flex-direction: row-reverse;
}

2、flex-wrap：該屬性用於設置容器內的元素如何換行，包括nowrap、wrap和wrap-reverse。

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

五、flex-shrink

flex-shrink屬性用於當容器寬度小於所有子元素寬度的總和時，指定子元素的縮小比例。

默認情況下，flex-shrink的值為1，即子元素可以縮小，但不能為負值。

.container {
  display: flex;
}
.box1 {
  flex-shrink: 1;
}
.box2 {
  flex-shrink: 2;
}
.box3 {
  flex-shrink: 3;
}

總結

flex-grow屬性是實現flex布局的核心之一，可以讓子元素按照一定的比例來佔據剩餘空間，以達到最優化的布局效果。同時，flex-wrap和flex-shrink等屬性也具有重要的作用，可以根據需要靈活設置。