(父元素加) :

/*新版弹性盒模型*/
/* 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移动端-弹性盒模型的更多相关文章

  1. Web的Flex弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. Flex 弹性盒模型

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 前端笔记之移动端&响应式(中)视口&百分比布局&弹性盒模型&rem&fillpage

    一.viewport视口 1.1什么是屏幕尺寸.屏幕分辨率.屏幕像素密度? 屏幕尺寸:指屏幕的对角线的长度,单位是英寸,常见的屏幕尺寸有3.5.3.7.4.2.4.7.5.0.5.5.6.0等. 屏幕 ...

  4. display:box;display:flex;弹性盒模型

    display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...

  5. 深入理解CSS弹性盒模型flex

    × 目录 [1]版本更迭 [2]display [3]基本概念[4]伸缩容器[5]伸缩项目 前面的话 CSS3引入了一种新的布局模型——flex布局.flex是flexible box的缩写,一般称之 ...

  6. 被废了的display:box弹性盒模型

    这几天在研究弹性布局,看书中写的是display:box,结果在chrome浏览器中是正常的,想着移动端大部分浏览器也是webkit内核的应该也没啥问题,结果确实没问题,但仔细一看,高度呢?好吧,严重 ...

  7. CSS弹性盒模型flex在布局中的应用

    × 目录 [1]元素居中 [2]两端对齐 [3]底端对齐[4]输入框按钮[5]等分布局[6]自适应布局[7]悬挂布局[8]全屏布局 前面的话 前面已经详细介绍过flex弹性盒模型的基本语法和兼容写法, ...

  8. html5浮动、等高、弹性盒模型

    1px dashed虚线 box-sizing拯救了布局 1.inherit  继承父级 2.content-box(默认)-----这个盒子的边框.内边距 这2个值是不包括在width和height ...

  9. CSS3弹性盒模型,Flex布局教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

随机推荐

  1. LeetCode Golang 4. 寻找两个有序数组的中位数

    4. 寻找两个有序数组的中位数 很明显我偷了懒, 没有给出正确的算法,因为官方的解法需要时间仔细看一下... func findMedianSortedArrays(nums1 []int, nums ...

  2. servlet缺省路径

    servlet缺省路径 servlet的缺省路径(<url-pattern>/</url-pattern>)是在tomcat服务器内置的一个路径.该路径对应的是一个Defaul ...

  3. python之静态属性、类方法、静态方法

    静态属性.类方法.静态方法 1. 静态属性:在函数前加@property,将函数逻辑”封装“成数据属性,外部直接调用函数名,如同调用属性一样.这个函数是可以调用类和实例的属性的,    静态属性的作用 ...

  4. python 进程 multiprocessing模块

    一.multiprocess.process模块 1.process类 Process([group [, target [, name [, args [, kwargs]]]]]),由该类实例化得 ...

  5. 【转】python 关键字

    转自:http://www.cnblogs.com/hongten/p/hongten_python_keywords.html python3.3.2中的关键字如下: The following i ...

  6. java数组简单逻辑代码

    package cuteSnow; public class HelloWorld { // 遍历数组里面的每个数字 public static void print(int[] array){ St ...

  7. 【BZOJ 1305】[CQOI2009]dance跳舞

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 男生和女生每个人都分身成两个节点 即x[1],x[2]和y[1],y[2] 然后如果i和j不相互喜欢 那么add(x[i][2],y ...

  8. C/C++ 名正则言顺

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50532701 名称所表达的含义极其丰富 ...

  9. Spring中基于Java的配置@Configuration和@Bean用法 (转)

    spring中为了减少xml中配置,可以生命一个配置类(例如SpringConfig)来对bean进行配置. 一.首先,需要xml中进行少量的配置来启动Java配置: <?xml version ...

  10. 将maven中央仓库不存在的jar包添加到本地仓库

    这里有2个案例,需要手动发出Maven命令包括一个 jar 到 Maven 的本地资源库. 要使用的 jar 不存在于 Maven 的中心储存库中. 您创建了一个自定义的 jar ,而另一个 Mave ...