CSS3的flex布局

浏览数：27 / 时间：2015年06月09日

flex的一些属性

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

自适应子元素（flex item，又称伸缩项目）的宽度
伸缩项目的float，clear，vertical-align属性失效
不能继承flex框，但可以依次设置
可以修改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。

flex-grow属性值为正数值，用来设置扩展比率，也就是剩余空间是正值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能分配到空间比例。若省略则会被设置为“1”。
flex-shrink属性值为正数值，用来设置收缩比率，也就是剩余空间是负值的时候此伸缩项目相对于伸缩容器里其他伸缩项目能收缩的空间比例。若省略则会被设置为“1”，在收缩的时候收缩比率会以伸缩基准值加权。
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的比例分配所有空间。

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>