1、flex兼容性根据caniuse >因此,flex布局主要应用在移动端。 2、基础测试代码<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> ...
1、flex兼容性
根据caniuse >
因此,flex布局主要应用在移动端。
2、基础测试代码
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } .item { /*flex布局*/ display: flex; } </style> </head> <body> <div class="item"> <div class="item-img"> <img src='/images/loading.gif' data-original="img/aaa.jpg" /> </div> <div class="item-desc"> <h3>说明</h3> </div> </div> </body></html>
效果:
说明:
将父元素设置为flex布局后,子元素也默认成了弹性元素,子元素并会自动沿主轴方向横向排列。
3、弹性布局轴
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <title>Document</title> <style type="text/css"> * { margin: 0; padding: 0; } .hb-shelf { /*flex布局*/ display: flex; } .item { width: 240px; border: 1px solid red; } </style> </head> <body> <section class="hb-shelf"> <article class="item"> 1 </article> <article class="item"> 2 </article> <article class="item"> 3 </article> <article class="item"> 4 </article> </section> </body></html>
给item设置宽度后,在浮动布局中,浏览器尽可能显示article的元素,直到填充满一整行才折行显示。
在flex布局中,flex-wrap: nowrap;值优先级高于article的宽度值width。当屏幕宽度小于960px时,保证所有的article等分扩展填充;当屏幕宽度大于960px时,右侧留空白。
效果:
原标题:flexbox布局
关键词:
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。