CSS ,flex: 1的用处

flex: 1;的妙用

首先  flex 是 flex-growflex-shrinkflex-basis的缩写。

当 flex 取值为一个非负数字,则该数字为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%,如下两个是等同的:

.item{flex: 1;}

.item{

       flex-grow: 1;

       flex-shrink: 1;

       flex-basis: 1;}

用途:

例如在表头有三个div被被应用到同一行后。但需要把第一个和第二个div排在最左边,第三个div需要排在最右边。可以直接给只给第二个div应用flex :1;(即把此行所有的剩余空间都给第二个div,第三个div自然就被挤到最右边了)

猜你喜欢

转载自www.cnblogs.com/yt0817/p/11825587.html