码迷,mamicode.com
首页 > 其他好文 > 详细

display:flex

时间:2016-10-20 14:58:25      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:

display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
display: -ms-flexbox;      /* TWEENER - IE 10 */
display: -webkit-flex;     /* NEW - Chrome */
display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */
-webkit-box-flex: 1;      /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-flex: 1;         /* OLD - Firefox 19- */
-webkit-flex: 1;          /* Chrome */
-ms-flex: 1;              /* IE 10 */
flex: 1;                  /* NEW, Spec - Opera 12.1, Firefox 20+ */

flex-direction 定义排列方式

flex-direction: row 从左向右排列,默认值
flex-direction: row-reverse 从右向左排列
flex-direction: column 从上向下排列
flex-direction: column-reverse 从下向上排列
 
flex-wrap 定义是否多行显示
flex-wrap: nowrap 显示单行,默认值
flex-wrap: wrap 从左向右排列,多行显示
flex-wrap: wrap-reverse 从右向左排列,多行显示
 
flex-flow  flex-direction和flex-wrap两个属性的缩写。两个性的值都可以用到此上面单独或多个。默认值是row nowrap,
 

justify-content 用于在主轴(X)上对齐伸缩项目

justify-content: flex-start
技术分享
 

justify-content: flex-end

技术分享
 

justify-content: center

技术分享
 

justify-content: space-between

技术分享
 

justify-content:space-around

技术分享
 
align-items 用于在侧(Y)轴上对齐伸缩项目
align-items: flex-start
技术分享
align-items: flex-end
技术分享
align-items: center
技术分享
align-items: stretch
技术分享
align-items: baseline
技术分享
 
align-content 调准伸缩行在伸缩容器里的对齐方式
注意:在只有一行的伸缩容器上没有效果
技术分享
水平垂直居中
display: flex; 
justify-content: center;
align-items: center;

display:flex

标签:

原文地址:http://www.cnblogs.com/kerry-xu/p/5980588.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!