深入探究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等属性也具有重要的作用，可以根据需要灵活设置。