CSS3 Flex 基础

今天用flex 写了一个管理系统的界面，很简单的布局，分享如下

### Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 

###任何一个容器都可以指定为Flex布局。

ex:

　　

  <div id="box">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
     <div class="inner">6</div>
</div>

 

#box{
        display: flex;
        flex-direction: row;
  /*一. flex-direction 决定主轴的对齐方向，分别有四个属性：
        1.row（默认值）：主轴为水平方向，起点在左端。  
        2.row-reverse：主轴为水平方向，起点在右端。
        3.column：主轴为垂直方向，起点在上沿。
        4.column-reverse：主轴为垂直方向，起点在下沿。
  */
        width: 500px;
        border: 1px solid red;
        flex-wrap: wrap;   /*
                             二.flex-wrap   子元素换行的方式  默认nowrap
                             wrap：换行，正常的折行 
                             wrap-reverse  第二行在第一行上 
  */  
        flex-flow:row no-wrap;
       /*             
           三. flex-flow:是flex-direction 和flex-wrap的简写形式，默认是 row  nowrap
               flex-flow：flex-direction|flex-wrap 
  */
            
        justify-content:center;
                                  /*
                      四.   justify-content  子元素子元素在主轴对齐方式  默认flex-start  左对齐
  
                       flex-end：右对齐
                       center： 居中
                       space-between：两端对齐，项目之间的间隔都相等。
                       space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
                       flex-start和flex-end，center这三个都比较简单，主要区分开下面的space-between和space-around；
                       space-between：两端对齐，       
  */
        align-items:center;
        /*
        
  */
}


.inner{
        width: 100px;
        height: 100px;
        background: #8a4182;
        margin: 10px;
        color:#fff;
        text-align:center;
        line-height:6;

}