微信小程序CSS之flex属性设置

川长思鸟来 2023-07-03 08:26 46阅读 0赞

# flex属性 #

flex属性是flex-basis、flex-grow、flex-shrink三个属性的简写。flex属性的取值有以下几种方式：

1. auto: 允许增长、允许缩小、宽度为自动；

2. none：不允许增长、不允许缩小、宽度为自动；

3.非负数字： 这个数字表示的是flex-grow的值，且flex-shrink为1，flex-basis为0%。

.inner{
        flex:1;
    }
    /*上述代码和下述代码等效*/
    .inner{
        flex-grow:1;
        flex-shrink:1;
        flex-basis:0%;
    }

4. 0：对应的flex-grow的值为0，且flex-shrink为1，flex-basis为0%。即不允许增长

.inner{
        flex:0;
    }
    /*上述代码和下述代码等效*/
    .inner{
        flex-grow:0;
        flex-shrink:1;
        flex-basis:0%;
    }

下面参考[知乎的解答][Link 1]来详细说明flex这三个布局参数的作用。

## **flex-basis** ##

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

![format_png][]

*  对于子项1，flex-basis 如果设置默认是auto，子项占用的宽度使用width 的宽度，width没设置也为 auto，所以子项占用空间由内容决定。
 *  对于子项2，flex-basis 为auto，子项占用宽度使用width 的宽度，width 为70px，所以子项子项占用空间是70px。
 *  对于子项3，flex-basis 为100px，覆盖width 的宽度，所以子项占用空间是100px。

## **flex-grow** ##

用来“瓜分”父项的“剩余空间”。

![format_png 1][]

容器的宽度为400px, 子项1的占用的基础空间(flex-basis)为50px，子项2占用的基础空间是70px，子项3占用基础空间是100px，剩余空间为 400-50-70-100 = 180px。 其中子项1的flex-grow: 0(未设置默认为0)， 子项2flex-grow: 2，子项3flex-grow: 1，剩余空间分成3份，子项2占2份(120px)，子项3占1份(60px)。所以 子项1真实的占用空间为: 50+0 = 50px， 子项2真实的占用空间为: 70+120 = 190px， 子项3真实的占用空间为: 100+60 = 160px。

## **flex-shrink** ##

用来“吸收”超出的空间

![format_png 2][]

容器的宽度为400px, 子项1的占用的基准空间(flex-basis)为250px，子项2占用的基准空间是150px，子项3占用基准空间是100px，总基准空间为 250+150+100=500px。容器放不下，多出来的空间需要被每个子项根据自己设置的flex-shrink 进行吸收。 子项1的flex-shrink: 1(未设置默认为1)， 子项2 flex-shrink: 2，子项3 flex-shrink: 2。子项1需要吸收的的空间为 `(250*1)/(250*1+150*2+100*2) * 100 = 33.33px`，子项1真实的空间为 250-33.33 = 216.67px。同理子项2吸收的空间为`(150*2)/(250*1+150*2+100*2) * 100=40px`，子项2真实空间为 `150-40 = 110px`。子项3吸收的空间为`(100*2)/(250*1+150*2+100*2) * 100 = 26.67px`，真实的空间为`100-26.67=73.33px`。

[Link 1]: https://zhuanlan.zhihu.com/p/39052660
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMyLnpoaW1nLmNvbS84MC92Mi1mMjZmMTZlYjg1MDNjYmFhZTQzZTE4YTlkNDI3Y2NhOV9oZC5qcGc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWM0LnpoaW1nLmNvbS84MC92Mi1jMWE0MWE0YWI1YzM3ZjA1ZDQ0MTE5YmQ0MTc5YjcxYl9oZC5qcGc?x-oss-process=image/format,png
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi05N2U1NDk1M2QyYWUyZDlmM2U3N2IzYzk3ZDYwNmQ3MF9oZC5qcGc?x-oss-process=image/format,png