web移动端-弹性盒模型
(父元素加) :
/*新版弹性盒模型*/
/* 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-orient: horizontal;*/
/*设置主轴方向为垂直方向*/
/*-webkit-box-orient: vertical;*//*元素在主轴上排列为反序*/
/*-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;*//*老版弹性盒模型*/
/*display: -webkit-box;*/
/*元素在侧轴开始位置,富裕空间在侧轴结束位置*/
/*-webkit-box-align: start;*//*元素在侧轴结束位置,富裕空间在侧轴开始位置*/
/*-webkit-box-align: end;*//*元素在侧轴中间位置,富裕空间在侧轴两侧*/
/*-webkit-box-align: center;*/元素弹性空间 : (给子元素加)
/*新版*/
/*flex-grow: 1;*//* 数值越小越靠前,可以接受0 或者负值 */
order:5;/*老版*/
-webkit-box-flex:1;/* 数值越小越靠前, 最小值默认处理为1*/
-webkit-box-ordinal-group:-2;
web移动端-弹性盒模型的更多相关文章
- Web的Flex弹性盒模型
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Flex 弹性盒模型
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 前端笔记之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage
一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...
- display:box;display:flex;弹性盒模型
display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...
- 深入理解CSS弹性盒模型flex
× 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...
- 被废了的display:box弹性盒模型
这几天在研究弹性布局,看书中写的是display:box,结果在chrome浏览器中是正常的,想着移动端大部分浏览器也是webkit内核的应该也没啥问题,结果确实没问题,但仔细一看,高度呢?好吧,严重 ...
- CSS弹性盒模型flex在布局中的应用
× 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...
- html5浮动、等高、弹性盒模型
1px dashed虚线 box-sizing拯救了布局 1.inherit 继承父级 2.content-box(默认)-----这个盒子的边框.内边距 这2个值是不包括在width和height ...
- CSS3弹性盒模型,Flex布局教程
布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...
随机推荐
- UVa 11549 Open Credit System
题意:给出n个数,找出两个整数a[i],a[j](i < j),使得a[i] - a[j]尽量大 从小到大枚举j,在这个过程中维护a[i]的最大值 maxai晚于ans更新, 可以看这个例子 1 ...
- 获得a-b的差[返回BigDecimal 类型]
/*** * 返回 a-b 的差 [返回 BigDecimal 类型] * @param a 被减数 * @param b 减数 * @return */ public static BigDecim ...
- [学习笔记] CS131 Computer Vision: Foundations and Applications:Lecture 3 线性代数初步
向量和矩阵 什么是矩阵/向量? Vectors and matrix are just collections of ordered numbers that represent something: ...
- Linux进程僵死原因排查思路
常情况下脚本执行时间几秒完成,如果超过很长时间执行完成,可能是进程等待某些资源引起阻塞(假死状态). 场景:xx.perl读取文件并发送邮件 现象:执行脚本的进程僵死(卡住) 排查:ps -ef |g ...
- 推荐几款常用的Eclipse插件
Eclipse 应该说是老牌也是最常用的Java开发工具,尽管这几年 InstelliJ IDEA 的发展势头很强劲,身边使用和推崇的人也大有人在,但个人而言还是觉有些不太习惯.这里也介绍几款自己常用 ...
- VUE:渐进式JavaScript框架(小白自学)
VUE:渐进式JavaScript框架 一.官网 英文 https://vuejs.org/ 中文 https://cn.vuejs.org/ 二:渐进式 即有一个核心库,在需要的时候再逐渐添加插件的 ...
- 数据库ifnull方法
IFNULL(expr1,expr2)如果expr1不是NULL,IFNULL()返回expr1,否则它返回expr2.IFNULL()返回一个数字或字符串值.例如: ifnull() 如果sum(t ...
- 复习昨天的,继续过Hard题目
# Title Editorial Acceptance Difficulty Frequency . 65 Valid Number 12.6% Hard . 126 Word ...
- 超级简单JS网页倒计时代码
<script type="text/javascript"> // JavaScript Document function ShowTimes(){ var Aft ...
- 跟我学设计模式视频教程——适配器模式,适配器模式VS装饰模式
课程视频 适配器模式 适配器模式VS装饰模式 唠嗑 课程笔记 课程笔记 课程代码 课程代码 新课程火热报名中 课程介绍