CSS3 - flex属性：flex-grow、flex-shrink和flex-basis

HTML

<div class="parent">
  <div class="c c1">1</div>
  <div class="c c2">2</div>
  <div class="c c3">3</div></div>
</div>

 CSS

.parent {
    height: 220px;
    width: 600px;
    display: flex;
}

① flex-basis

项目的长度，或者叫项目伸缩的基准值。可以是px em...或auto...。flex-grow和flex-shrink的实际效果都和这个基准值有关。默认值为auto。

② flex-grow

扩展比例。针对的是项目（项目指子元素，即.c1、.c2 ...）中flex-basis的总和小于容器宽度的情况（容器指父元素，即.parent），让项目按一定比例扩展，并恰好填充满整个容器。

如何把要扩展的宽度分配到项目中：

.c {
	flex-basis:50px;
}
.c1 {
	flex-grow:1;
	background-color:#409EFF;
}
.c2 {
	flex-grow:2;
	background-color:#EEEEEE;
}
.c3 {
	flex-grow:1;
	background-color:#FAEBD7;
}

为了方便把flex-basis都设置为50px，用容器的宽度减去所有项目flex-basis的总和计算出剩下未分配的空间的宽度，即600px - (50px + 50px +50px) = 450px。剩下的空间的宽度 按flex-grow的比例进行扩展，值越大扩展的宽度越大。比如.c2的flex-grow为2，即扩展的宽度为450px*(2/4) = 225px，故.c2的宽度是flex-basis（基准值，50px）+ 225px（按比例扩展的值）= 275px。其他两个类似。

③ flex-shrink

收缩比例。针对的是项目中flex-basis的总和大于容器宽度的情况，让项目按一定比例缩放，并恰好能放进容器。

如何要缩放的宽度分配给项目

.c {
	flex-basis:220px;
}
.c1 {
	flex-shrink:1;
	background-color:#409EFF;
}
.c2 {
	flex-shrink:2;
	background-color:#EEEEEE;
}
.c3 {
	flex-shrink:1;
	background-color:#FAEBD7;
}

为了方便把flex-basis都设置为220px，用所有项目flex-basis的总和减去容器的宽度计算出溢出的空间的宽度，即(220px + 220px +220px) - 600px= 60px。溢出的空间的宽度 按flex-grow的比例进行缩放，值越大缩放的宽度也越大。比如.c2的flex-grow为2，即他缩放的宽度为60px*(2/4) = 30px，故.c2的宽度是flex-basis（基准值，220px）- 30px（按比例缩放的值）= 190px。其他两个类似。

注意：

如果所有项目的flex-basis加起来的总和大于等于容器的宽度，并且没有设置flex-shrink属性，那么会按项目的flex-basis之间的比例进行分配。

我的主页：https://blog.csdn.net/qq_29750277，有关于前端（Vue、electron...）、Python等