全国服务热线:4008-888-888

公司新闻

css延展性小盒子flex

最先是   flex-basis  ,basis英语含意是 关键成份 ,因此和我width放到一起时,毫无疑问把width弄死,basis碰到width时便会说.我是最关键的成份,你是主次成份,因此看到我的情况下你需要靠边站。
次之是   flex-grow,grow英语含意是 扩张,拓展,提升 ,这就意味着当父原素的总宽超过子原素总宽之和时,而且父原素有剩下,这时候,flex-grow便会说我想发展,我想长大了,如何样才可以发展呢,自然是共享父原素的室内空间了。见下边第二个特性的內容
最终是   flex-shrink, shrink英语含意是 收拢, ,这就意味着当父原素的总宽低于子原素总宽之和时,而且超过了父原素的总宽,这时候,flex-shrink便会说外边的全球太苦了,我都是返回爸爸的怀里中来吧!因而,flex-shrink便会依照一定的占比开展收拢。见下边第三个特性的內容
第一个特性:flex-basis
该特性用于设定原素的总宽,实际上,width还可以设定总宽。假如原素高度一致时设定了width和flex-basis,那麼width 的值便会被flex-basis遮盖掉。
style type="text/css" media="screen"
        .box{
            display: flex;
            margin:100px auto;
            width:400px;
            height:200px;
        }
        .inner{
            width:200px;
            height:100px;
            flex-basis:300px;
            background:pink;
        }
    /style
/head
body
div
    div
    /div
/div
/body
见下面的图:网编我将总宽设定为width:200px;  flex-basis:300px;結果显示信息说明子原素.inner运用了特性flex-basis;
第二个特性:flex-grow
该特性用于设定当父原素的总宽超过全部子原素的总宽的和时(即父原素会出现剩下室内空间),子原素怎样分派父原素的剩下室内空间。 flex-grow的默认设置数值0,含意是该原素不索要父原素的剩下室内空间,假如值超过0,表明索要。值越大,索要的越强大。
 举个案子: 父原素宽400px,有2个子原素:A和B。A宽为100px,B宽为200px。 则空闲室内空间为 400-(100+200)= 100px。 假如A,B也不索要剩下室内空间,则有100px的空闲室内空间。
body
div
    div
    /div
    div
    /div
/div
/body
.box{
            display: flex;
            flex-direction: row;
            margin:100px auto;
            width:400px;
            height:200px;
            border:1px solid red;
 
        }
        .inner{
            flex-basis:100px;
            height:100px;
            background:pink;
        }
        .inner1{
            flex-basis:200px;
            height:100px;
            background:blue;
        }
见下面的图:
 假如A索要剩下室内空间:设定flex-grow为1,B不索要。则最后A的尺寸为 本身总宽(100px)+ 剩下室内空间的总宽(100px)= 200px 。
 .inner{
            flex-basis:100px;
            height:100px;
            background:pink;
            flex-grow:1;
        }
        .inner1{
            flex-basis:200px;
            height:100px;
            background:blue;
        }
见下面的图:
假如A,B都设索要剩下室内空间,A设定flex-grow为1,B设定flex-grow为2。则最后A的尺寸为 本身总宽(100px)+ A得到的剩下室内空间的总宽(100px (1/(1+2))),最后B的尺寸为 本身总宽(200px)+ B得到的剩下室内空间的总宽(100px (2/(1+2)))(这儿呢网编只给了公式计算,小伙子伴们能够自身去算一下)
.inner{
            flex-basis:100px;
            height:100px;
            background:pink;
            flex-grow:1;
        }
        .inner1{
            flex-basis:200px;
            height:100px;
            background:blue;
            flex-grow:2;
        }
见下面的图:
第三个特性:flex-shrink
该特性用于设定,当父原素的总宽低于全部子原素的总宽的和时(即子原素会超过父原素),子原素怎样变小自身的总宽的。 flex-shrink的默认设置数值1,当父原素的总宽低于全部子原素的总宽的和时,子原素的总宽会减少。值越大,减少的越强大。假如数值0,表明不降小。
 举个案子: 父原素宽400px,有两子原素:A和B。A宽为200px,B宽为300px。 则A,B一共超过父原素的总宽为(200+300)- 400 = 100px。 假如A,B也不减少总宽,即都设定flex-shrink为0,则会出现100px的总宽超过父原素。 
 .box{
            display: flex;
            flex-direction: row;
            margin:100px auto;
            width:400px;
            height:200px;
            border:1px solid red;
 
        }
        .inner{
            flex-basis:200px;
            height:100px;
            background:black;
             flex-shrink:0;
        }
        .inner1{
            flex-basis:300px;
            height:100px;
            background:blue;
            flex-shrink:0;
 
        }
见下面的图:
假如A不降小总宽:设定flex-shrink为0,B减少。则最后B的尺寸为 本身总宽(300px)- 一共超过父原素的总宽(100px)= 200px 
.inner{
            flex-basis:200px;
            height:100px;
            background:black;
             flex-shrink:0;
        }
        .inner1{
            flex-basis:300px;
            height:100px;
            background:blue;
            flex-shrink:1;
 
        }
见下面的图:
假如A,B都减少总宽,A设定flex-shirk为3,B设定flex-shirk为2。则最后A的尺寸为 本身总宽(200px)- A减少的总宽(100px * (200px * 3/(200 * 3 + 300 * 2))) = 150px,最后B的尺寸为 本身总宽(300px)- B减少的总宽(100px * (300px * 2/(200 * 3 + 300 * 2))) = 250px
.inner{
            flex-basis:200px;
            height:100px;
            background:black;
             flex-shrink:3;
        }
        .inner1{
            flex-basis:300px;
            height:100px;
            background:blue;
            flex-shrink:2;
 
        }
见下面的图:
这儿网编确立一点,flex是flex-grow,flex-shrink,  flex-basis  (留意网编写的次序)简称方式,大伙儿能够记一下下边的简称标准:
如:flex 赋值为 none,则测算数值 0 0 auto,以下是等同于的:
.item {flex: none;}
.item {
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: auto;
}
当 flex赋值为 auto,则测算数值 1 1 auto,以下是等同于的:
.item {flex: auto;}
.item {
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: auto;
}
当 flex 赋值为一个非负数据,则该数据为 flex-grow 值,flex-shrink 取 1,flex-basis 取 0%,以下是等同于的:
.item {flex: 1;}
.item {flex-grow: 1;    flex-shrink: 1;    flex-basis: 0%;}
当 flex 赋值为一个长短或百分数,则视作 flex-basis 值,flex-grow 取 1,flex-shrink取 1,有以下等同于状况(留意 0% 是一个百分数而并不是一个非负数据):
.item-1 {flex: 0%;}
.item-1 { flex-grow: 1;    flex-shrink: 1;    flex-basis: 0%;}
.item-2 {flex: 24px;}
.item-2 { flex-grow: 1;    flex-shrink: 1;    flex-basis: 24px;}
当 flex赋值为2个非负数据,则各自视作 flex-grow和 flex-shrink的值,flex-basis取 0%,以下是等同于的:
.item {flex: 2 3;}
.item { flex-grow: 2;    flex-shrink: 3;    flex-basis: 0%;}
当 flex赋值为一个非负数据和一个长短或百分数,则各自视作 flex-grow和 flex-basis的值,flex-shrink取 1,以下是等同于的:
.item {flex: 2333 3222px;}
.item {    flex-grow: 2333;    flex-shrink: 1;    flex-basis: 3222px;}
————————————


在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服