CSS3的flex布局

flex的一些属性

CSS3中引入了另一种框--flexbox,flexbox有一些block和inline不同的性质,比如:

  1. 自适应子元素(flex item,又称伸缩项目)的宽度
  2. 伸缩项目的float,clear,vertical-align属性失效
  3. 不能继承flex框,但可以依次设置
  4. 可以修改flex流的方向以及布置规则

         现在就大体讲述下这个具体属性的表示含义。

设置flexbox的兼容性

  将一个容器设置为flexbox(又称伸缩容器)很简单,但是却存在一些兼容性的问题,比如在IE10下,早期的webkit系列中,都与标准有一些差异,但是我们可以通过less预处理器避免手动输入这些重复的代码。

.flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

flex-flow属性介绍

flex-flow设置flex流的方向(主轴的方向)以及伸缩项目如何换行,具体对应的属性是flex-direction和flex-wrap。flex-direction设置main-axis(主轴)的方向,可选参数为row,row-reverse,column,column-reverse,顾名思义,当方向为row时,伸缩项目横向排列,若此时所有伸缩项目的宽度已经超出了伸缩容器的宽度,浏览器就需要根据flex-wrap属性来布局。若flex-wrap:wrap,则换行放置,若为flex-wrap:nowrap,则所有伸缩项目放在同一行内。

          flex-flow是这两个属性的结合,设置方式为flex-flow: row wrap;

justify-content属性介绍

           justify-content用来设置伸缩项目在主轴上的排列方式。justify-content有一些参数:flex-start、flex-end、center、space-between、space-around。具体的区别可以通过测试可知。

align-items属性介绍

          该属性设置伸缩项目在侧轴(垂直于主轴方向)方向如何放置。和justify-content类似,可以取flex-start,center,flex-end和stretch属性。stretch可以将所有的伸缩项目拉伸至等高高度,并充满伸缩容器。

order属性介绍

order属性可以改变伸缩项目的显示顺序,可以方便的修改布局的相对位置。order值越小,布局位置越靠前。order也有兼容性的问题,可以在less下这样设置

.order(@val) {
  -webkit-box-ordinal-group: @val;
  -moz-box-ordinal-group: @val;
  -ms-flex-order: @val;
  -webkit-order: @val;
  order: @val;
}

伸缩项目中flex属性介绍

flex是一个综合属性设置,包括了flex-grow、flex-shrink、flex-basis。

  1. flex-grow属性值为正数值,用来设置扩展比率,也就是剩余空间是正值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能分配到空间比例。若省略则会被设置为“1”。
  2. flex-shrink属性值为正数值,用来设置收缩比率,也就是剩余空间是负值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例。若省略则会被设置为“1”,在收缩的时候收缩比率会以伸缩基准值加权。
  3. flex-basis与width属性使用相同的值,可以用来设置flex-basis长写并指定伸缩基准值,也就是根据可伸缩比率计算 出剩余空间的分布之前,伸缩项目主轴长度的起始数值。若在flex缩写省略了此属性设置,则flex-basis的指定值是“0”,若flex-basis的指定值是“auto”,则伸缩基准值的指定值是元素主轴长度属性的值。

         flex也有一些缩写值,如flex:auto和flex:initial。其中,flex:auto === flex:1 1 auto;flex:initial === flex: 1 0 auto;当flex-basis设置为0时,意味着将按照flex-grow的比例分配所有空间。

         具体可以通过 w3c文档 查看。

         flex属性也有兼容性问题,依然使用less解决:

.flex(@flex-grow,@flex-shrunk,@flex-basis) {
  -webkit-box-flex: @arguments;
  -moz-box-flex:  @arguments;
  -webkit-flex:  @arguments;
  -ms-flex:  @arguments;
  flex:  @arguments;
}

示例

现在使用h5标签构建一个响应式布局,使用flex模型和媒体查询。

.flexbox() {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}

.flex(@flex-grow,@flex-shrunk,@flex-basis) {
  -webkit-box-flex: @arguments;
  -moz-box-flex:  @arguments;
  -webkit-flex:  @arguments;
  -ms-flex:  @arguments;
  flex:  @arguments;
}

.order(@val) {
  -webkit-box-ordinal-group: @val;
  -moz-box-ordinal-group: @val;
  -ms-flex-order: @val;
  -webkit-order: @val;
  order: @val;
}

html{
  -webkit-text-size-adjust:none;
  font-size: 10px;
}
.wrapper{
  background: tomato;
  .flexbox;
  flex-flow: row wrap;
}
.main-header{
  .flex(1,1,100%);
  font-weight: bold;
  font-size: 40px;
  color:#ffffff;
  text-align: center;
  height:100px;
  line-height: 100px;
  background: blueviolet;
}
.main-content{
  .flex(2,1,60%);
  width:60%;
  font-size: 14px;
  .order(2);
  height:300px;
  background: #ffffff;
  line-height:20px;
}
.nav{
  .flex(1,1,20%);
  width:20%;
  .order(1);
  background: greenyellow;
  ul{
    list-style: none;
    margin:0;
    padding:0;
    overflow: hidden;
    background: deepskyblue;
    li{
      float: left;
      width:100%;
      padding: 10px;
      border-top: 1px solid rgba(255,255,255,0.3);
      border-bottom: 1px solid rgba(0,0,0,0.1);
      text-align: center;
      height: 100%;
      &:hover{
        background: darken(deepskyblue, 2%);
      }
      a{
        text-decoration: none;
        color: #ffffff;
        font-size: 14px;
        display: block;
        height: 100%;
        cursor: pointer;
      }
    }
  }
}
.sec{
  .flex(1,1,20%);
  width:20%;
  .order(3);
  font-weight: bold;
  font-size: 40px;
  color:#ffffff;
  text-align: center;
  background: #000000;
}
.main-footer{
  .flex(1,1,100%);
  .order(4);
  font-weight: bold;
  font-size: 40px;
  color:#ffffff;
  text-align: center;
  background: violet;
  height:100px;
  line-height: 100px;
}

@media screen and (max-width : 600px){
  .nav{
    .flex(1,1,40%);
    width:40%;
    .order(1);
  }
  .main-content{
    .flex(2,1,60%);
    width:60%;
    .order(2);
  }
  .sec{
    .flex(1,1,100%);
    .order(3);
  }
}
<div class="wrapper">
        <header class="main-header">header</header>
        <div class="main-content">
            <p>伸缩容器:一个设有“display:flex”或“display:inline-flex”的元素
                伸缩项目:伸缩容器的子元素
                主轴、主轴方向:用户代理沿着一个伸缩容器的主轴配置伸缩项目,主轴是主轴方向的延伸。
                主轴起点、主轴终点:伸缩项目的配置从容器的主轴起点边开始,往主轴终点边结束。
                主轴长度、主轴长度属性:伸缩项目的在主轴方向的宽度或高度就是项目的主轴长度,伸缩项目的主轴长度属性是width或height属性,由哪一个对着主轴方向决定。
                侧轴、侧轴方向:与主轴垂直的轴称作侧轴,是侧轴方向的延伸。
                侧轴起点、侧轴终点:填满项目的伸缩行的配置从容器的侧轴起点边开始,往侧轴终点边结束。
                侧轴长度、侧轴长度属性:伸缩项目的在侧轴方向的宽度或高度就是项目的侧轴长度,伸缩项目的侧轴长度属性是「width」或「height」属性,由哪一个对着侧轴方向决定。</p>
        </div>
        <nav class="nav">
            <ul>
                <li><a href="javascript:void 0;">home</a></li>
                <li><a href="javascript:void 0;">help</a></li>
                <li><a href="javascript:void 0;">find</a></li>
                <li><a href="javascript:void 0;">search</a></li>
            </ul>
        </nav>
        <section class="sec">
            section
        </section>
        <footer class="main-footer">footer</footer>
    </div>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Crossin的编程教室

Python的门面担当

在大多数时候,我们都在黑黢黢的控制台里执行 Python 脚本。这看起来很酷很 GEEK。但对于部分场景下的用户来说,这样就不大美观和人性化了:我们需要交互更方...

25840
来自专栏程序员的知识天地

HTML/CSS/JS 是如何在浏览器中,渲染成你看到的页面?【图解Chrome】

Chrome 算是程序员的标配了,从全球的市场份额来看,它在全球市场的份额已经超过 60%。

41640
来自专栏用户画像

使用jatoolsPrinter实现套打

最近在工作中遇到了套打的需求,前前后后,花了不少时间,现在总结一下套打的实现方式。

6810
来自专栏理论坞

那些你不知道的Photoshop冷知识①——以一敌三的组合计

关于笔刷,用过PS的人基本上都知道几个快捷键,比如Ctrl+"["、"]"调整笔刷大小之类,这次我带来的方法比那个更加便捷,不但是大小上的调整,连同硬度和颜色都...

7010
来自专栏程序员的知识天地

web前端学习:HTML5十个新特性

                   :刻度尺/度量衡,描述数据所处的阶段,红色(危险)=>黄色(警告)=>绿色(优秀)

20210
来自专栏搞前端的李蚊子

基于Vue.js的大型报告页项目实现过程及问题总结(二)

距离上一篇文章过去了二十多天了,期间一直想把第二部分写完,结果在测试过程中遇到了各种坑爹的问题,到今天才算基本完成,也许还有后续,但趁着今天有时间就写出来吧,也...

463100
来自专栏腾讯NEXT学位

Cocos Creator制作一个微信小游戏(上)

| 导语 微信小游戏都火成这样了,为什么不尝试一下? 我们的目标是使用Cocos Creator从零开始制作一个小游戏,并放到微信上玩。

5.5K40
来自专栏hightopo

基于 HTML5 的 WebGL 3D 智能楼宇监控系统

36630
来自专栏菩提树下的杨过

拼凑了几个自定义的Panel(包括FishEyePanel,WrapPanel等几个常用的布局)

先看效果:  ? wrapPanel的效果在固定宽度的情况下看不出来,可查看在线演示地址:http://images.24city.com/jimmy/Cust...

19150
来自专栏用户2442861的专栏

Chrome开发者工具不完全指南:(三、性能篇)

 卤煮在前面已经向大家介绍了Chrome开发者工具的一些功能面板,其中包括Elements、Network、Resources基础功能部分和Sources进阶功...

14820

扫码关注云+社区

领取腾讯云代金券