做优质教育·育智慧人才
咨询热线:028-86981029
菁瑞优智it培训 当前位置: 首页> 新闻资讯> 正文

flexbox弹性布局,作用在flex items上面的6个属性

来源:菁瑞优智 作者:小菁 时间:2021-04-01

一个完美的网页布局,往往会给用户一种舒适的心情。

上一篇 《flexbox弹性布局,作用在flex container上的6个属性》讲了作用在flex container上的6个属性,本文则是讲解作用在flex items上面的6个属性。

一、应用在flex items上的6个属性

1、order

用于排列flex items子项的顺序。默认值为0,可以为正值,负值。

.flex-item{
    order:-1;
    order:5;
    order:0;
}

这个和z-index层级有点像,但是没有那么复杂,默认值为0,大家都一样,谁的值小,就排在前面,按照值从小到大排列。

三个子项已经设置了对应的order值,通过改变第三个子项的order值看看排列顺序的变化。

菁瑞优智H5前端

.flex{
    width:600px;
    height: 200px;
    background: #eee;
    display:flex;                
}
.flex-item{
    background-color: #ddd;
    margin: 10px;
    padding: 10px;
    border: 1px solid #666;
}
#n1{
    order:-1;
}
#n2{
    order:1;
}
#n3{
    order:2;
    background-color: #96ceb4
}

2、align-self

用于对齐flex items子项中的某一项。可以覆盖为flex container定义的align-items的值。

align-items是父容器为子元素全体定义对齐方式,align-self是定义一个子项个体。

align-self: auto | stretch | flex-start | flex-end | center | baseline;

相比align-items的值,多了一个auto,如果用auto的话,表示继承父元素设置的align-items的值。

看如下测试,为flex container设置了align-items:baseline,然后为第一个flex item设置不同的align-self值,看看有什么变化。

菁瑞优智H5前端

.flex{
    width:600px;
    height: 200px;
    background: #eee;
    display:flex; 
    align-items:baseline;               
}
.flex-item{
    background-color: #ddd;
    margin: 10px;
    padding: 10px;
    border: 1px solid #666;
}
#n1{      
    background-color: #96ceb4
}

3、flex-grow

该属性IE12以上支持。

grow具有生长、扩展的意思,flex-grow用于设置子项如何扩展,占据父容器的剩余空间。

感觉有点像分家产呢,如果比例一样,就平分父母剩余的家产,如果比例不一样,就按照比例分配。

flex-grow的默认值为0,可以为小数,不能为负数。

父容器剩余空间的总量看做1.

分为两种情况:

第一种:只有一个子项设置了flex-grow。

  • flex-grow小于1,则按照比值扩展。比如flex-grow:0.25,则扩展父容器剩余空间的25%。

  • flex-grow大于等于1,则占用父容器所有剩余空间。

改变第二个子项的flex-grow的值,看看变化。

菁瑞优智H5前端

.flex{
    width:600px;
    height: 200px;
    background: #eee;
    display:flex;
}
.flex-item{
    background-color: #ddd;  
    padding: 10px;
    border: 1px solid #666;
}

第二种:多个子项设置了flex-grow的值。

  • flex-grow值的总和小于1,则父容器剩余空间没有占用完,每个子项扩展的值等于和父容器总量的比值。比如,一个子项的flex-grow:0.25,则扩展了25%的父容器剩余空间。一个flex-grow:0.5,则扩展50%的空间,剩余的25%没有占用。

  • flex-grow值的总和大于等于1,则父容器剩余空间全部占用,各个子项的扩展空间等于它们flex-grow的比值。

如下案例,第一个子项flex-grow为0.5,第二个,第三个为0,改变第二个子项的值,看看变化。

菁瑞优智H5前端

.flex{
    width:600px;
    height: 200px;
    background: #eee;
    display:flex;
}
.flex-item{
    background-color: #ddd;  
    padding: 10px;
    border: 1px solid #666;
}
#n1{
    flex-grow:0.5;
}

当为0.25的时候,父容器还剩下25%没有占据,为0.5的时候,和第一个子项各占据一半,父容器空间被用完。为1的时候,,0.5:1,各自扩展父容器剩余空间的2:1的比例。为2的时候,是4:1,为0的时候,不扩展,第一个子项占据父容器剩余空间的50%。

4、flex-shrink

shrink具有“收缩”的含义。

该属性用于当父容器空间不够的时候,子项如何收缩。

可以有小数,不支持负数,和flex-grow不一样的是,默认值为1,表示默认要收缩,设置为0,表示不收缩。

父容器不足的空间为收缩空间,总量为1.

当某个子项不收缩的时候,可能导致溢出父容器,所以这种情况要确保其他子项要收缩并且总宽度不溢出。

多个子项设置了flex-shrink,按照比值来收缩以适应父容器。如果都是1:1:1,则收缩的比值都是一样。是1:2:1,第二个子项收缩的范围是第一个和第三个的两倍。

菁瑞优智H5前端

.flex{
    width:300px;
    height: 200px;
    background: #eee;
    display:flex;
    align-items:flex-start;
}
.flex-item{
    background-color: #ddd; 
    flex-basis: 100px; 
    padding:10px;
    border: 1px solid #666;
}

5、flex-basis

设置flex items子项的初始大小。默认是内容框大小,除非设置了box-sizing为border-box。

注意:如果为元素设置了flex-basis(除auto之外)和width(或flex-direction:column的高度),则flex-basis优先。

flex-basis的默认值为auto,表示内容宽度。可以设置为px、%、em等单位的值。

也有关于“content”的各种属性值,但是谷歌目前不支持。

当父容器空间不足的时候,子项的宽度也许并不是flex-basis的值,因为默认子项会收缩。

下面案例父容器的总宽度是400px,当子项的flex-basis总和超过父容器的时候,会自动收缩,这时的宽度并不是flex-basis的值。

菁瑞优智H5前端

div{
    box-sizing: border-box;
}
.flex{
    width:400px;
    height: 200px;
    background: #eee;
    display:flex;
    align-items:flex-start;
}
.flex-item{
    background-color: #ddd; 
    flex-basis: 100px; 
    padding:10px;
    border: 1px solid #666;
}

6、flex

flex是flex-grow、flex-shrink、flex-basis的缩写。

flex可以有一个、两个或三个值。

有一个值的时候

  • flex : auto ; 等价于flex : 1 1 auto ; 子项会扩展剩余空间,会收缩以适应容器,会根据内容宽高自动调整。

  • flex : none ; 等价于flex : 0 0 auto ; 子项不灵活,不会扩展或收缩,会根据内容宽高调整大小。

  • flex : initial ; 这是默认值,等价于 flex : 0 1 auto ; 子项不扩展,但是会收缩,会根据内容宽高调整。

  • flex : 无单位的正数 ; 等价于 flex : 正数 1 0;指定子项的扩展空间的比例。此时的flex-basis为0.

  • flex : 有单位的正值 ;  比如 flex : 40px ; flex : 3em ; 此时这个值表示flex-basis。flex : 30%等价于:flex : 1 1 30%。

有两个值的时候

  • 第一个值必须是flex-grow,第二个值可能是flex-shrink,或者flex-basis。

  • 比如flex : 2 2,对应的是flex:flex-grow flex-shrink。

  • 比如flex : 1 30px,对应的是flex:flex-grow flex-basis。

有三个值的时候

  • flex : 2 2 10%,对应的是flex:flex-grow flex-shrink flex-basis。

默认情况下,子项不会收缩到最小内容大小以下,可以通过设置min-width或min-height来改变。

二、flex补充说明

应用了flex的容器,float、clear、vertical-align都是无用的。

width也要慎用,毕竟是弹性布局,关键在于弹性。

不过,如果只是单纯的PC端网页布局,还是可以继续采用传统的布局方法;如果是移动端或是不考虑兼容的oc则建议采用flex弹性布局

免费预约,试听课程
即将开班,名额有限,火热预约中

免费提升

课程升级,老学员免费学习

免费指导

老学员遇到技术难题,提供技术支持

免费探讨

不定期开展线上、线下公开课

免费吃喝

学员交流会(免费吃喝玩儿乐交友)