Flex项目属性布局

项目属性

介绍完容器属性，简单介绍下项目属性。容器属性是加在容器上的，那么项目属性呢，就是写在项目上的，就好比容器属性给ul，项目属性给li差不多一个意思。

1.order

取值：默认0，用于决定项目排列顺序，数值越小，项目排列越靠前。

.item {

  order: <integer>;

}

 

取值：默认0，用于决定项目在有剩余空间的情况下是否放大，默认不放大；注意，即便设置了固定宽度，也会放大。

.item {

  flex-grow: <number>; /* default 0 */

}

 

假设默认三个项目中前两个个项目都是0，最后一个是1，最后的项目会沾满剩余所有空间。

 

假设只有第一个项目默认为0，后面两个项目flex-grow均为1，那么后两个项目平分剩余空间。

 

 

假设第一个项目默认为0，第二个项目为flex-grow:2，最后一个项目为1，则第二个项目在放大时所占空间是最后项目的两倍。

1. flex-shrink

取值：默认1，用于决定项目在空间不足时是否缩小，默认项目都是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。

但如果某个项目flex-shrink设置为0，则即便空间不够，自身也不缩小。

.item {

  flex-shrink: <number>; /* default 1 */

}

 

 

上图中第二个项目flex-shrink为0，所以自身不会缩小。

这是我所学到的Flex项目属性布局，所以我要分享给你们，希望可以帮助到你们。

以上就是我的分享，新手上道，请多多指教。如果有更好的方法或不懂得地方欢迎在评论区教导和提问喔！