移动端flex布局
移动端flex布局
弹性盒布局语法分为两部分:
1. 添加在父容器上的语法
(1)display : flex; 设置为弹性盒(父元素添加)
(2)flex-direction: 主轴排列方式
row; 默认值,默认为横向排列。
row-reverse; 反转横向排列(右对齐,从后往前排,最后一项排在最前面。
column; 显示为列。
column-reverse; 反转纵向排列,从下往上排,最后一项在最上面。
(3)flex-wrap: 是否进行换行处理。
nowrap; 默认值,不换行处理
wrap; 换行处理 (第二行处于中间位置)
wrap-reverse; 反向换行
(4)justify-content: 决定了主轴方向上子项的对齐和分布方式。(主轴对齐方式)
flex-start; 默认,顶端对齐。
center; 居中对齐。
flex-end; 末端对齐。
space-between; 表现为两端对齐。between是中间的意思,意思是多余的空白间距只在元素中间区域分配。
space-around; 均分对齐,around是环绕的意思,意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距,最终视觉上边缘两侧的空白只有中间空白宽度一半。
space-evenly; evenly是匀称、平等的意思。也就是视觉上,每个flex子项两侧空白间距完全相等。
(5)align-items : 每一行中的子元素上下对齐方式.(侧轴对齐方式)
flex-start;(y轴顶部对齐)
center;(y轴中间对齐)
flex-end;(y轴以底部对齐)
baseline;如果弹性盒元素的行内轴与侧轴为同一条,则该值与flex-start等效。其他情况下,该值将参与基线对齐。
(6)align-content : 行与行之间的对齐方式。
flex-start;(以开始位置为对齐方式)
center;(居中对齐)
flex-end;(底对齐)
space-between;(两端对齐)
space-around;(均分对齐)
注:要两行即两行以上 。
2.添加到子容器上的语法
(1)flex-grow : 一个数字,规定项目将相对于其他灵活的项目进行扩展的量。
0; 默认值 , 不去扩展
1; 去扩展 , 会把空白区域全部占满
(2)flex-shrink : 一个数字,规定项目将相对于其他灵活的项目进行收缩的量。
正常默认值是1
0表示不收缩。
注:当没有空余并且值大于1的时候才收缩,并且没有负值。
(3)flex-basis : 跟flex-shrink/flex-grow很像。
flex-shrink/flex-grow是设置一个比例值,flex-basis是设置一个具体值。
(4)flex:1; 每个子项都加flex:1;则剩余空间平分。
(5)algin-self: 规定灵活容器内被选中项目的对齐方式。
auto;默认值。元素继承了父容器的align-items属性。如果没有父容器则为“stretch”
flex-start;元素位于容器的开头。
center;元素位于容器的中心。
flex-end;元素位于容器的结尾。
stretch;元素被拉伸以适应容器。
(6)order:number顺序优先级,数字越大越往后排,默认为0,支持负数。
最新文章
- prometheus监控系统
- Hbase学习连接
- jquery实现表格的搜索功能
- C#--字符、字符串学习
- 手机打开PDF文档中文英文支持(乱码问题)解决攻略
- QtCreator动态编译jsoncpp完美支持x86和arm平台
- 安装docker1.10
- hdu 4022 STL
- 我都使用了这些VS插件
- 读阿里巴巴Java开发手册v1.2.0之工程结构有感【架构篇】
- 201521044091 《Java程序设计》第2周学习总结
- heartbeat+DRBD 高可用 双机热备
- Python爬虫入门教程 8-100 蜂鸟网图片爬取之三
- vc调试不能入断点
- [转]关于ReentrantLock中线程读某个变量是否需要加锁
- PASCAL VOC数据集分析(转)
- 修改Nginx配置文件来隐藏index.php
- OptParse选项工具模块
- bnuoj16491
- ztree案例笔记:用户不规范操作导致添加不了节点的问题
热门文章
- Matlab高级教程_第二篇:关于MATLAB转C#过程中MWArray到C#数组,C#数组到MWArray相互转换
- Cantor表(模拟)
- [LC] 1055. Shortest Way to Form String
- COMET探索系列三【异步通知服务器关闭数据连接实现思路】
- [LC] 198. House Robber
- Cow Routing(最短路spfa)
- JVM简述
- Java虚拟机内存划分
- B-Tree索引
- delicate|definite|density|deny doing|draw up |draw on|no equal for|establish|equipped|