弹性盒子布局flex:1

弹性盒子布局flex:1

技术杂谈小彩虹2021-07-17 17:02:0770A+A-

关于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待在页面底部,为了解决这个问题使用了弹性盒子布局,看下代码:

<!DOCTYPE html >
<html >
<head>
<meta charset="utf-8" />
<title>紧贴底部的页脚</title>
<style> 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; } </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
  <header>Site name</header>
  <main>
    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。
  </main>
  <footer>
      <p>Site name footer</p>
      <p>Site name footer</p>
  </footer>
</body>
</html>

看下区别-- 之前:footer会紧跟在main元素之后,main元素内容很少时,页面会很丑

1.png 图A

设置了弹性盒布局之后:中间元素即使内容很少也被撑满,使footer可以待在底部了

2.png 图B

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-grow:0 的情况下,看下弹性子元素的初始大小,还是拿上面代码,假设设置 .mian{ flex:0 1 auto; } 页面会怎么呈现?其实跟图A是一样的效果,可以往上翻翻看A图的样子。

再换一种, .main { flex:0 1 900px },再来看下效果

图片.png 图C

设置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;} 的效果

图片.png

好了,再来看另一个例子吧,父容器宽度较大,三个弹性子元素等宽,如果某一个设置了 flex:1

<!DOCTYPE html >
<html >
<head>
<meta charset="utf-8" />
<title>flex:1</title>
<style> .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; } </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
   <div class="wrap">
     <div class="item">元素1</div>
     <div class="item specical">元素2</div>
     <div class="item">元素3</div>
   </div>
</body>
</html>

效果:

图片.png

如果设置.special:{ flex:0 1 0;} 则会变成这样,元素2以内容为大小

图片.png

如果设置.special:{ flex:0 1 200px;width:500px; } 则会变成这样,会忽略掉元素已设置的500px大小 图片.png

计算弹性盒子宽度

弹性盒子总宽度小于父容器宽度

<!DOCTYPE html >
<html >
<head>
<meta charset="utf-8" />
<title>flex:1</title>
<style> .container {display:flex;width:1000px;height:100px;} .one{ flex:1 1 100px;} .two{ flex:2 2 100px;} .three{ flex:1 2 100px;} </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
   
   <div class="container">
     <div class="one">one</div>
     <div class="two">two</div>
     <div class="three">three</div>
   </ul>
</body>
</html>

弹性盒子宽度的和: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是不起作用的,因此忽略。

弹性盒子总宽度大于父容器宽度

<!DOCTYPE html >
<html >
<head>
<meta charset="utf-8" />
<title>flex:1</title>
<style> .container {display:flex;width:200px;height:100px;} .one{ flex:1 1 100px;} .two{ flex:1 2 100px;} .three{ flex:1 2 100px;} </style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></head>

<body>
 
  <div class="container">
    <div class="one">one</div>
    <div class="two">two</div>
    <div class="three">three</div>
  </ul>
</body>
</html>

父容器宽度 200px

弹性子元素宽度之和 1100+1100+1*100=300px,子容器会溢出 300px-200px=100px

因为设置了收缩因子,加权综合:1100+2100+2*100=500px

三个子元素溢出量和最重的宽度分别为:

第一个:(1*100px)/500px * 200px = 20px   子元素宽度:100px-20px=80px
第二个:(2*100px)/500px * 200px = 40px   子元素宽度:100px-40px=60px
第三个:(3*100px)/500px * 200px = 40px 子元素宽度:100px-40px=60px

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链 | 域名展示
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们