首页 > 代码库 > 移动端学习笔记（二）
移动端学习笔记（二）
弹性盒模型：
【主轴方向设置】
新版弹性盒模型：display:flex;
设置主轴方向为水平方向：flex-direction: row;
设置主轴方向为垂直方向：flex-direction: column;
------------------------------------------------------
老版弹性盒模型：display: -webkit-box;
设置主轴方向为水平方向：-webkit-box-orient: horizontal;
设置主轴方向为垂直方向：-webkit-box-orient: vertical;
================================================================
【主轴元素排列方向】
新版弹性盒模型：display:flex;
设置主轴方向为水平,元素排列为反序：flex-direction: row-reverse;
设置主轴方向为垂直,元素排列为反序：flex-direction: column-reverse;
================================================================
老版版弹性盒模型：display: -webkit-box;
元素在主轴上排列为反序:-webkit-box-direction: reverse;
元素在主轴上排列为正序:-webkit-box-direction: normal;
==================================================================
【主轴上富余空间管理】
新版弹性盒模型：display:flex;
元素在主轴开始位置 ，富裕空间在主轴的结束位置：justify-content:flex-start;
元素在主轴结束位置，富裕空间在主轴开始位置:justify-content: flex-end;
元素在主轴中间,富裕空间在主轴两侧:justify-content: center;
富裕空间平均分配在每两个元素之间: justify-content: space-between;
富裕空间平均分配在每个元素两侧:justify-content: space-around;
----------------------------------------------------------------------------------
老版版弹性盒模型：display: -webkit-box;
元素在主轴的开始位置,富裕空间在主轴的结束位置:-webkit-box-pack: start;
元素在主轴结束位置，富裕空间在主轴开始位置:-webkit-box-pack: end;
元素在主轴中间,富裕空间在主轴两侧:-webkit-box-pack: center;
富裕空间平均分配在每两个元素之间:-webkit-box-pack: justify;
（新版特有的）==================================================================
【侧轴上富余空间管理】
新版弹性盒模型：display:flex;
元素在侧轴开始位置，富裕空间在侧轴结束位置:align-items: flex-start;
元素在侧轴结束位置，富裕空间在侧轴开始位置:align-items: flex-end;
元素在侧轴中间位置，富裕空间在侧轴两侧:align-items: center;
根据侧轴方向上文字的基线对齐:align-items: baseline;(这里第二个子div设置行高了)
----------------------------------------------------------------------------------
新版弹性盒模型：display: -webkit-box;
元素在侧轴开始位置，富裕空间在侧轴结束位置：-webkit-box-align: start;
元素在侧轴结束位置，富裕空间在侧轴开始位置：-webkit-box-align: end;
元素在侧轴中间位置，富裕空间在侧轴两侧：-webkit-box-align: center;
==================================================================
【元素弹性空间】
flex-grow 属性用于设置或检索弹性盒的扩展比率
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; } #box{ height: 200px; border: 1px solid #000; /*新版弹性盒模型*/ /*display: flex;*/ /*老版弹性盒模型*/ display: -webkit-box; } #box div{ /*新版*/ /*flex-grow: 1;*/ /*老版*/ -webkit-box-flex:1; background: red; font-size: 30px; color: #fff; } #box div:nth-of-type(2){ /*flex-grow: 3;*/ background: olive; -webkit-box-flex: 3; } #box div:nth-of-type(3){ /*flex-grow: 1;*/ background: blueviolet; -webkit-box-flex: 1; } #box div:nth-of-type(4){ /*flex-grow: 1;*/ background: darkorange; -webkit-box-flex: 1; } </style> </head> <body> <div id="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body></html>
----------------------------------------------------------------------------------------------------------------
【元素具体位置的设置】
order 属性 设置或检索弹性盒模型对象的子元素出现的順序
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style> body{ margin: 0; } #box{ height: 200px; border: 1px solid #000; /*新版弹性盒模型*/ /*display: flex;*/ /*老版弹性盒模型*/ display: -webkit-box; } #box div{ width: 50px; color: #fff; } #box div:nth-of-type(1){ /* 数值越小越靠前，可以接受0 或者负值 */ /*order:4;*/ background: red; -webkit-box-ordinal-group: 4; /* 数值越小越靠前， 最小值默认处理为1*/ /*-webkit-box-ordinal-group:-2;*/ } #box div:nth-of-type(2){ /*order: 3;*/ background: yellow; -webkit-box-ordinal-group: 3; } #box div:nth-of-type(3){ /*order: -1;*/ background: blue; -webkit-box-ordinal-group: -1; } #box div:nth-of-type(4){ /*order: -2;*/ background: green; -webkit-box-ordinal-group: -2; } </style> </head> <body> <div id="box"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> </div> </body></html>
(新版)
(老版)
移动端学习笔记（二）
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。