你的位置:首页 > 软件开发 > 网页设计 > flexbox布局

flexbox布局

发布时间:2017-10-24 17:00:13
1、flex兼容性根据caniuse >因此,flex布局主要应用在移动端。 2、基础测试代码<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> ...

1、flex兼容性

根据caniuse >flexbox布局

因此,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>

效果:

flexbox布局

 

说明:

将父元素设置为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布局

 

原标题:flexbox布局

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。

可能感兴趣文章

我的浏览记录