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

HTML

1
2
3

 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等

你可能感兴趣的:(前端开发)