Flex属性详解

Posted by Xiaosa's Blog on March 13, 2020

flex 属性详解

flex 是 flex-grow、flex-shrink、flex-basis的缩写.

flex-grow

按比例分配一下父项的“剩余空间”.

eg:)

父项宽度1000px,若共有两个子项,子项分别设置flex-grow为1,3,则子项宽度分别为 10001/(1+3),10003/(1+3)

flex-shrink

用来“吸收”超出的空间

eg:)

父元素 500px。三个子元素分别设置为 150px，200px，300px。

三个子元素的 flex-shrink 的值分别为 1，2，3。

首先，计算子元素溢出多少：150 + 200 + 300 - 500 = -150px。

那这 -150px 将由三个元素的分别收缩一定的量来弥补。

具体的计算方式为：每个元素收缩的权重为其 flex-shrink 乘以其宽度。

所以总权重为 1 * 150 + 2 * 200 + 3 * 300 = 1450

三个元素分别收缩：

150 * 1(flex-shrink) * 150(width) / 1450 = -15.5

150 * 2(flex-shrink) * 200(width) / 1450 = -41.4

150 * 3(flex-shrink) * 300(width) / 1450 = -93.1

三个元素的最终宽度分别为：

150 - 15.5 = 134.5

200 - 41.4 = 158.6

300 - 93.1 = 206.9

flex-basis

flex-basis 用于设置子项的占用空间。如果设置了值，则子项占用的空间为设置的值；如果没设置或者为 auto，那子项的空间为width/height 的值。

以下情况中,上下两个类含义相同.

1
2
3
4
5
6
7

.item {flex: 2333 3222 234px;}
.item {
    flex-grow: 2333;
    flex-shrink: 3222;
    flex-basis: 234px;
}


1
2
3
4
5
6
7

.item {flex: none;}
.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}


1
2
3
4
5
6
7
8

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


1
2
3
4
5
6

.item {flex: 1;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}

1
2
3
4
5
6
7

.item-1 {flex: 0%;}
.item-1 {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0%;
}


1
2
3
4
5
6

.item {flex: 24px;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 24px;
}

1
2
3
4
5
6

.item {flex: 2 3;}
.item {
    flex-grow: 2;
    flex-shrink: 3;
    flex-basis: 0%;
}

1
2
3
4
5
6

.item {flex: 2333 3222px;}
.item {
    flex-grow: 2333;
    flex-shrink: 1;
    flex-basis: 3222px;
}
FEATURED TAGS