css3-webkit-flex布局_html/css

 
Web的Flex弹性盒模型
 
 
[ flex ]
 
display: -webkit-flex;
 width:100px; flex: 2; flex: 1; 
display: -webkit-flex; 
 width:150px; margin-right:10px; flex: 1; width:150px; margin-left:10px; 
[ flex-direction ]
 
flex-direction: row; /*default*/
 
display: -webkit-flex;
 flex: 1; flex: 2; flex: 3; 
flex-direction: row-reverse;
 
display: -webkit-flex; 
 flex: 1; flex: 2; flex: 3; 
flex-direction: column;
 
display: -webkit-flex; 
 flex: 1; flex: 2; flex: 3; 
flex-direction: column-reverse;
 
display: -webkit-flex; 
 flex: 1; flex: 2; flex: 3; 
[ flex-wrap ]
 
-webkit-flex-wrap: nowrap; /* default */
 
display: -webkit-flex; 
 
width: 400px
 100px; width: 200px; width: 300px; 
-webkit-flex-wrap: wrap
 
display: -webkit-flex; 
 
width: 400px
 100px; width: 200px; width: 300px; 
-webkit-flex-wrap: wrap-reverse
 
display: -webkit-flex; 
 
width: 400px
 100px; width: 200px; width: 300px; 
[ flex-flow ]: flex-direction flex-wrap; /* 自个体会吧 */
 
[ justify-content ]
 
/* 效果如同 float:left; */
 
justify-content: flex-start; /* default */
 
display: -webkit-flex;
 width:100px; width:100px; 
/* 效果如同 float:right; */
 
justify-content: flex-end;
 
display: -webkit-flex;
 width:100px; width:100px; 
/* 第三代水平居中方案 */
 
justify-content: center;
 
display: -webkit-flex;
 width:100px; width:100px; 
justify-content: space-between; 
 
display: -webkit-flex;
 width:100px; width:100px; 
justify-content: space-around; 
 
display: -webkit-flex;
 width:100px; width:100px; 
[ align-self ]
 
display: -webkit-flex;
 align-self:flex-start; align-self:flex-end; align-self:center; align-self:auto; /*default */ align-self:baseline; align-self:stretch; 
[ align-items ]
 
align-items: flex-start; /* default */
 
display: -webkit-flex;
 width:100px; width:100px; 
align-items: flex-end; 
 
display: -webkit-flex;
 width:100px; width:100px; 
/* 第三代垂直居中 */
 
align-items: center; 
 
display: -webkit-flex;
 width:100px; width:100px; 
align-items: baseline; 
 
display: -webkit-flex;
 width:100px; width:100px; 
align-items: stretch; 
 
display: -webkit-flex;
 height:100px; min-height:20px; max-height:60px; 
[ align-content ]
 
/* 对比 align-items*/
 
align-items: flex-start
 
display: -webkit-flex;
 a b c d e f 
align-content: flex-start; 
 
display: -webkit-flex;
 a b c d e f 
align-content: flex-end; 
 
display: -webkit-flex;
 a b c d e f 
align-content: center; 
 
display: -webkit-flex;
 a b c d e f 
align-content: space-between; 
 
display: -webkit-flex;
 a b c d e f 
align-content: space-around; 
 
display: -webkit-flex;
 a b c d e f 
align-content: stretch; /*default*/ 
 
display: -webkit-flex;
 a b c d e f 
[ order ]
 
display: -webkit-flex;
 a b c d (order:-1) e f