弹性盒子布局flex:1 |
您所在的位置：网站首页 › flex3插件不起作用 › 弹性盒子布局flex:1 |
弹性盒子布局flex:1
|
关于flex:1
使用弹性盒子布局经常会用到一个属性flex:1，这个属性其实是三个属性的缩写形式:flext-grow、flex-shirk和flex-basic，三个的默认值分别是flext-grow:0 ,flex-shirk:1,flex-basic:auto。而flext:1 展开后是这样的：flex:1 1 0%。注意，并不是 flex:1 1 auto 奥，虽然就差0%与auto不同，但这两者区别确是很大的，待我娓娓道来~~~ 我们先来看下这三个弹性盒元素属性的定义吧 flex-grow 属性用于设置或检索弹性盒子的扩展比率,默认值0； flex-shrink 属性指定了 flex 元素的收缩规则，默认值1； flex-basis 属性用于设置或检索弹性盒伸缩基准值，默认值auto; 让这三个属性生效的条件是一样的：属于弹性盒元素...(有一丝丝废话的赶脚...) 看起来就真的是定义那样，果然，还是要靠实例去理解他们的含义 举个栗子《CSS揭秘》一书第七章 结构与布局当中，有个紧贴底部的页脚效果实现，其中就运用了flex:1。header与footer以元素自身内容大小即可， 而中间元素main的内容很少时不足以让footer待在页面底部，为了解决这个问题使用了弹性盒子布局，看下代码： 紧贴底部的页脚 body{ text-align: center; display: flex;; flex-flow: column; height: 100vh; } header{ background: #abcdef; padding:10px 0; } /*任何一个元素只要设置了一个大于0的flex值，就将获得可伸缩的特性；flex的值负责控制多个可伸缩元素之间的尺寸分配比例。4:2 同 2:1是一样的效果，因为真正起作用的是它们的数值比例。*/ main{ background: #abcdef; margin: 20px; padding: 10px; flex: 1; } footer { background: #abcdef; color: yellow; padding: 1px; text-shadow: 1px 1px green; } Site name Free fonts have met their match. We know how hard it is to find quality freeware that is licensed for commercial work. We've done the hard work, hand-selecting these typefaces and presenting them in an easy-to-use format. Here are some of our favorites Free fonts have met their match. We know how hard it is to find quality freeware that is licensed for commercial work. We've done the hard work, hand-selecting these typefaces and presenting them in an easy-to-use format. Here are some of our favorites。 Site name footer Site name footer看下区别-- 之前：footer会紧跟在main元素之后，main元素内容很少时，页面会很丑
设置了弹性盒布局之后：中间元素即使内容很少也被撑满，使footer可以待在底部了
flex:1在此处的作用显而易见，就是为了把弹性容器剩余的空间占满，header和footer的默认flex-grow是0，是以自身内容大小为准。 flex-basic:auto； 与flex-basic:0；flex-basic代表弹性元素的初始大小 auto 是 flex-basic 的默认值，长度等于灵活项目(弹性子元素)的长度。如果该项目未指定长度(未设置width或height属性)，则长度将根据内容决定 flex-basic:0; 即使元素设置了 width 或 height 也会被忽略掉，以元素自身内容大小为弹性子元素的伸缩基准值 flex:1，即 flex:1 1 0; 其实是把元素的初始大小还原成了元素自身内容大小，当然除了设置 flex:1 你还可以设置 flex:1 1 100px; 或 flex:1 1 50px; 指定元素的初始大小为多大，弹性元素就会在此准大小的基础上扩大或缩小。 flex:auto，即 flex:1 1 auto;代表弹性子元素以自身内容大小（未设置width或height）或设置了宽度高度的大小为伸缩基准值， 与flex:1相比很明显只是flex-basic值的不同。 让我们来看个例子，在设置了 flex-grow:0 的情况下，看下弹性子元素的初始大小，还是拿上面代码，假设设置 .mian{ flex:0 1 auto; } 页面会怎么呈现？其实跟图A是一样的效果，可以往上翻翻看A图的样子。 再换一种， .main { flex:0 1 900px },再来看下效果
设置flex-grow:0 是为了只探究 flex-basic 对弹性子元素的影响。flex-grow 的默认值就是0，即默认情况下元素不会被扩大，而flex:1 1 0; 以弹性元素自身内容大小为基准值的基础上扩大或缩小，直到把父容器剩余空间占满为止。也可以设置了元素大小的同时再扩大，如 flex:1 1 100px; 元素初始大小为100px，在此基础上扩大，可以理解为元素扩大的最小大小为100px，然后扩大元素自身。 再来看 .main{flex 0 1 0; height:1000px;} 的效果 好了，再来看另一个例子吧,父容器宽度较大，三个弹性子元素等宽，如果某一个设置了 flex:1 flex:1 .wrap{ display: flex; width: 500px; height: 300px; margin: 0 auto; border: 1px solid pink; box-sizing: border-box; } .wrap .item{ width: 100px; border: 1px solid purple; box-sizing: border-box; } .wrap .item.specical{ flex: 1; } 元素1 元素2 元素3效果： 如果设置.special:{ flex:0 1 0;} 则会变成这样，元素2以内容为大小 如果设置.special:{ flex:0 1 200px;width:500px; } 则会变成这样,会忽略掉元素已设置的500px大小
弹性盒子宽度的和：100px + 100px + 100px=300px 父容器剩余宽度：1000px - 300px =700px 因为设置了flex-grow，所以这剩余的700px会被每个弹性元素瓜分掉 具体如下： 第一个瓜分到的宽度: 700px * (1/4)=175px 第二个瓜分到的宽度：700px * (2/4)=350px 第三个瓜分到的宽度：700px * (1/4)=175px再加上元素自身的基准大小，三个元素的宽度分别是： 第一个：100+175=275px 第二个：100+350=450px 第三个：100+175=275px这里有个隐藏点，虽然设置了flex-shirk的值，但计算时并未用到它，因为父容器的宽度1000比弹性子容器之和100+100+100 要多的多，父容器大于弹性子元素宽度时，flex-shirk是不起作用的，因此忽略。 弹性盒子总宽度大于父容器宽度 flex:1 .container {display:flex;width:200px;height:100px;} .one{ flex:2 1 100px;} .two{ flex:2 2 100px;} .three{ flex:1 2 100px;} one two three父容器宽度 200px 弹性子元素宽度之和（这里取每个子元素的flex-basic值） 100 + 100 + 100 =300px，子容器会溢出 300px-200px=100px 因为设置了收缩因子，加权综合：1 * 100 + 2 * 100 + 2 * 100 =500px 三个子元素溢出量和最终的宽度分别为： 溢出量计算公式=（每个子元素的宽度 * 每个子元素的收缩因子大小/加权总和500） * 溢出量100px 每个子元素宽度计算公式=每个子元素的flex-basic值 - 溢出量 第一个:(100px * 1/500px) * 100px = 20px 子元素宽度：100px-20px=80px 第二个:(100px * 2/500px) * 100px = 40px 子元素宽度：100px-40px=60px 第三个:(100px * 2/500px) * 100px = 40px 子元素宽度：100px-40px=60px当弹性子容器之和大于父容器时，flex-grow是不参与宽度计算的，因为父容器没有剩余空间可扩展。 2022-01-04 修正：弹性盒子总宽度大于父容器宽度时的宽度计算结果错误。 2023-05-13 修正：粗心哈哈。 |
【本文地址】
今日新闻 |
推荐新闻 |