您的位置 >>> 星想互联 >>> 编程技术 >>> 响应式布局
Flexbox布局:Flex项目属性
点击数:256  发布时间2018-05-17 17:53:05
一、Flex项目的相关属性

Flex容器中的项目的相关属性有以下6个:

  • order
  • flex-grow
  • flex-shrink
  • flex-basis
  • flex
  • align-self

order属性

order属性定义项目的排序顺序。数值越小,排列越靠前。

.item{
    order:<integer>
}

注意:order属性默认为0,可以为负数



flex-grow属性

flex-grow属性定义项目的放大比例,默认为0,就是如果存在剩余空间,也不放大。

.item{
    flex-grow:<number>;
}


如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则为2的占据剩余空间比为1的大一倍。



flex-shrink属性

flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。

.item{
    flex-shrink:<number>;
}


如果所有项目的flex-shrink属性都为1,当空间不足的时候,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。

注意:flex-shrink不能为负


flex-basis属性

flex-basis属性定义了在分配偶遇空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。

.item{
    flex-basis:<length>| auto;
}

它可以设为跟width或height属性一样的值(像300px),则项目将占据固定空间。


flex属性

flex属性是flex-grow、flex-shrink、flex-basis的缩写,默认值为0 1 auto。

.item{
    flex:none|[<'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

这个属性有两个快捷键值:auto (1 1 auto) 和 none(0 0 auto)

flex常见值:

  • flex:0 auto,flex:initial与flex:0 1 auto相同。这是初始值。根据元素的widht/height属性决定元素的尺寸。(如果项目的主轴长度属性的计算值为auto,则会根据其内容来决定元素尺寸。)当剩余空间为正值时,伸缩项目无法伸缩,但当空间不足时,伸缩项目可伸缩至其最小值。

  • flex:auto与flex:1 1 auto相同。根据width/height属性决定元素的尺寸,但是完全可以伸缩,会吸收主轴上剩下的空间。如果所有项目均为flex:auto、flex:initial或者flex:none,则在项目尺寸决定后,剩余的正空间会被平分给flex:auto的项目。

  • flex:none与flex:0 0 auto相同。根据width/height属性决定元素的尺寸,但是完全不可伸缩。其效果与initial类似但即使在空间不够而溢出的情况下,伸缩项目也不能收缩。

  • flex:number与flex:1 0px相同。该值使元素可伸缩,并将伸缩基准值设置为零,导致该项目会根据设置的比率占用伸缩容器的剩余空间。如果一个伸缩容器的所有项目都使用此模式,则它们的尺寸会正比于指定的伸缩比率。

注意:

  • 建议使用缩写属性,这样可以防止浏览器推算相关值。
  • flex最后两个属性可选
  • 默认状态下,伸缩项目不会收缩至比其最小内容尺寸更小,我们可以通过设置min-width或者min-height属性来改变这个默认状态。



align-self属性

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承元素的align-items属性,如果没有父元素,则等同于stretch。

.item{
    align-self:auto | flex-start | flex-end | center | baseline | stretch;
}


该属性可能取6个值,除了auto,其他都与align-items属性完全一致。


来源:咸宁网站建设