Rumah  >  Artikel  >  hujung hadapan web  >  介绍flex的用法和属性

介绍flex的用法和属性

零下一度
零下一度asal
2017-06-28 09:45:541909semak imbas

本文介绍下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>

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

因为设置了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-
29.0+ 9.0+ 9.0+ 28.0+

 

Atas ialah kandungan terperinci 介绍flex的用法和属性. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn