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

flex布局

时间:2018-07-28 17:24:03      阅读:170      评论:0      收藏:0      [点我收藏+]

标签:rtc   splay   容器   color   line   self   baseline   flex   between   

设置flex布局:

display: flex;

容器属性:

1. flex-direction  // 主轴方向,row,column
2. justify-content // 主轴方向排列方式,如:spance-around,spance-between,flex-start,flex-end,center
3. align-items // 用于主轴交叉轴方向对齐方式,如:等高stretch,flex-start,flex-end,center,baseline
4. flex-wrap // 主轴换行,nowrap,wrap
5. flex-flow // flex-direction和flex-wrap的简写
6. align-content // 多轴对齐方式,flex-start,flex-end,center,spance-between,spance-around,strtch

项目属性:

1. order  // 项目排列顺序
2. flex-grow // 项目放大比例,用于剩余空间的划分,如:某个项目flex-grow: 1;则这个项目实际大小为原来大小加上剩余空间大小,即填充满整行或整列
3. flex-shrink // 项目缩小比例,剩余空间的划分
4. flex-basis // 定义项目占据主轴空间大小
5. flex // flex-grow,flex-shrink,flex-basis的简写
6. align-self // 单个项目,在交叉轴上的排列方式,如:某个项目align-self: flex-end,即这个项目底部对齐排列

 

flex布局

标签:rtc   splay   容器   color   line   self   baseline   flex   between   

原文地址:https://www.cnblogs.com/maoriaty/p/9382560.html

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