运用css属性flex将angular meterial toolbar内按钮推向最右端

弹性盒子(Flex Box)是css3一种新的布局模式。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置display属性为flex或inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

flex属性设置在弹性子元素上,是flex-grow, flex-shrink, flex-basis三个属性的缩写,默认值为 0 1 auto。

flex-grow属性定义子元素的放大比例,默认为0,表示如果存在剩余空间,也不放大。

如果所有子元素的flex-grow属性都为1,则他们将等分剩余空间(如果有的话)。

如果一个子元素的flex-grow属性为2,其他子元素都为1,则前者占据的剩余空间将比其他项多一倍。

flex-shrink属性定义子元素的缩小比例,默认为1,表示如果空间不足,该子元素将缩小。

如果所有子元素的flex-shrink属性都为1,当空间不足时,都将等比例缩小。

如果一个子元素的flex-shrink属性为0,其他子元素都为1,则空间不足时,前者不缩小。

flex-basis属性定义了在分配多余空间之前,子元素占据的主要空间(main size)。

Toolbar是一个弹性容器,可以加入一个分割用的子元素,把子元素后的内容都推到另外一边去。

<span class="toolbar-separator"></span>

.toolbar-separator {

    flex: 1 1 auto;

}

 

 

猜你喜欢

转载自www.cnblogs.com/kongguzuyi/p/11831519.html