Flexbox相关知识

gistfile1.css

/*
 * Flexbox 设置为伸缩容器(包括伸缩容器和伸缩项目)
 * (flex /inline-flex )
 */

display: -webkit-flex;
display: flex;


/*
 * Flexbox 使用 主轴 和 侧轴的概念
 * 主轴和测轴会因为伸缩流的方向改变而改变
 */
 
 
/**************************************
 伸缩容器
**************************************/

/*
 * flex-direction  ( row(默认) / column ) 伸缩流的方向
 */
-webkit-flex-direction: column;
        flex-direction: column;

/*
 * justify-content  ( flex-start(默认) / flex-end / center / space-between / space-around )   主轴对齐
 */
 -webkit-justify-content: center;
         justify-content: center;
         
/*
 * align-items  ( flex-start (默认) / flex-end / center / baseline / stretch )   侧轴对齐
 */
-webkit-align-items: center;
        align-items: center;

/*
 * flex-wrap  ( nowrap (默认) / wrap / wrap-reverse )   伸缩行换行
 */
 -webkit-flex-wrap: wrap;
         flex-wrap: wrap;
         
/*
 * align-content  ( 参数和 justify-content 一样 )   堆栈伸缩行,会更改flex-wrap的行为
 */
-webkit-align-content: center;
        align-content: center;
        
/*
 * flex-flow ( [flex-direction] [flex-wrap] )伸缩方向与换行
 * 是 flex-direction 和 flex-wrap 的缩写。
 */
-webkit-flex-flow: column nowrap;
        flex-flow: column nowrap;      

        
      
      
/**************************************
 伸缩项目
**************************************/  

/*
 * order 显示顺序
 */
-webkit-order: -1;
        order: -1;
        
/*
 * margin 外边距
 */
margin: auto;

/*
 * align-self ( 参数和 align-items 一样 )   侧轴对齐,会更改align-items的行为
 */
-webkit-align-self: flex-start;
        align-self: flex-start;
        
/*
 * flex (number / initial / auto / none) 伸缩性
 */
-webkit-flex: 1;
        flex: 1; 
        
        
        
eg:       
http://css-tricks.com/flexbox-bar-navigation/?utm_source=javascriptweekly&utm_medium=email