介绍flex的用法和属性-html教程-PHP中文网

介绍flex的用法和属性

零下一度

发布： 2017-06-28 09:45:54

原创

2251人浏览过

本文介绍下flex的用法和属性

这个一个自适应的3列盒子

<div class="flex">
  <div style="background-color:red;">红色</div>
  <div style="background-color:blue;">蓝色</div>  
  <div style="background-color:green;">绿色</div></div><style>.flex{ display: flex;}.flex div{border: 1px solid #000; flex:auto; height: 100px;}</style>

登录后复制

红色

蓝色

绿色

flex: flex-grow flex-shrink flex-basis|auto|initial|inherit;

flex主要带3个属性值

分别是flex-grow 规定项目将相对于其他灵活的项目进行扩展的量。

红色

蓝色

绿色

<div class="flex1">
  <div style="background-color:red;">红色</div>
  <div style="background-color:blue;">蓝色</div>  
  <div style="background-color:green;">绿色</div></div><style>.flex1{ display: flex; width:400px;}.flex1 div{border: 1px solid #000; flex:auto; height: 200px;}.flex1 div:nth-child(1){-webkit-flex:1 0 100px;flex:1 0 100px;}.flex1 div:nth-child(2){-webkit-flex:2 0 100px;flex:2 0 100px;}.flex1 div:nth-child(3){-webkit-flex:3 0 100px;flex:3 0 100px;}</style>

登录后复制

如上面的例子，当父容器的宽度大于子元素的宽度和的时候触发

因为设置了flex-basis为100px

flex的宽度为400px，里面的3个dom的总长度设置为300px；那么多了100的剩余宽度。

第一个子元素的扩展量：(1/(1+2+3))*100，即约等于16px；

第二个子元素的扩展量：(2/(1+2+3))*100，即约等于32px；

第三个子元素的扩展量：(3/(1+2+3))*100，即约等于48px；

分别是flex-shrink 规定项目将相对于其他灵活的项目进行收缩的量。

红色

蓝色

绿色

<div class="flex2">
  <div style="background-color:red;">红色</div>
  <div style="background-color:blue;">蓝色</div>  
  <div style="background-color:green;">绿色</div></div><style>.flex2{ display: flex; width:400px;}.flex2 div{border: 1px solid #000; flex:auto; height: 100px;}.flex2 div:nth-child(1){-webkit-flex:0 1 200px;flex:0 1 200px;}.flex2 div:nth-child(2){-webkit-flex:0 2 200px;flex:0 2 200px;}.flex2 div:nth-child(3){-webkit-flex:0 3 200px;flex:0 3 200px;}</style>

登录后复制

如上面的例子，当父容器的宽度小于子元素的宽度和的时候触发

MVM mall 网上购物系统

采用 php+mysql 数据库方式运行的强大网上商店系统，执行效率高速度快，支持多语言，模板和代码分离，轻松创建属于自己的个性化用户界面 v3.5更新： 1).进一步静态化了活动商品. 2).提供了一些重要UFT-8转换文件 3).修复了除了网银在线支付其它支付显示错误的问题. 4).修改了LOGO广告管理,增加LOGO链接后主页LOGO路径错误的问题 5).修改了公告无法发布的问题,可能是打压

查看详情

因为设置了flex-basis为200px

flex的宽度为400px，里面的3个dom的总长度设置为600px；那么少了200px的剩余宽度。

因为设定过收缩的量所以需要200*1+200*2+200*3=1200；

所以第1个子容器的宽度为200-（200*1/1200）*200=166px

所以第2个子容器的宽度为200-（200*2/1200）*200=134px

所以第3个子容器的宽度为200-（200*3/1200）*200=100px

当「flex-basis」在「flex」属性中不为0时（包括值为auto，此时伸缩基准值等于自身内容宽度），「flex子项」将分配容器的剩余空间（剩余空间即等于容器宽度减去各项的伸缩基准值）

当「flex-basis」在「flex」属性中等于0时，「flex子项」将分配容器的所有空间（因为各项的伸缩基准值相加等于0，剩余空间等于容器宽度减去各项的伸缩基准值，即减0，最后剩余空间值等于容器宽度），所以可以借助此特性，给各子项定义「flex: n」来进行按比例均分容器总宽度

浅绿 = 支持
红色 = 不支持
粉色 = 部分支持

Values	IE	Firefox	Chrome	Safari	Opera	iOS Safari	Android Browser	Android Chrome
Basic Support	6.0-10.0	2.0-21.0	4.0-20.0	6.0	15.0+^-webkit-	6.0-6.1	2.1-4.3	18.0-19.0
	11.0+	22.0+	21.0+^-webkit-	6.1+^-webkit-	17.0+	7.0+^-webkit-	4.4+	20.0+^-webkit-
	11.0+	22.0+	29.0+	9.0+	17.0+	9.0+	4.4+	28.0+