(父元素加) :

/*新版弹性盒模型*/
/* 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. HDU 2955 Robberies【01背包】

    解题思路:给出一个临界概率,在不超过这个概率的条件下,小偷最多能够偷到多少钱.因为对于每一个银行都只有偷与不偷两种选择,所以是01背包问题. 这里有一个小的转化,即为f[v]代表包内的钱数为v的时候, ...

  2. 手游服务器端接入google的SDK

    在接入google的SDK之前,当然先要用你的google开发者账号要去申请你接入的应用,这些步骤就直接省略了具体的步骤可以查看这篇博文:http://blog.csdn.net/hjun01/art ...

  3. 关于Android Studio更新后一直Refreshing的解决办法!

    今天更新了一下studio一直是这个问题 查了很多资料终于解决了 造成这个问题的原因是要更新的gradle版本和studio安装路径中的gradle版本不一致导致的 把他们改成一致的即可 在这个目录里 ...

  4. 十款APP开发框架

    对于大部分Web开发人员,HTML.CSS和 Java是他们最熟练的开发技能.然而,开发一个原生的移动App,对他们来说却是完全陌生的领域.因为开发Android,iOS 或 Windows Phon ...

  5. this self指针

    this 和 self指针 为函数提供了运行上下问:为函数提供了当前对象的其实地址,方便函数的对对象的访问.

  6. X位的有/无符号整数

    目录 X位的有符号整数 X位的无符号整数 知识点来自leetcode整数翻转 X位的有符号整数 以4位为例,不管多少位都是相同的概念 在有符号整数中,第一位二进制位用来表示符号,0为正,1为负 最大值 ...

  7. Pyhton学习——Day9(阶段性练习)

    # 1.文件内容如下,标题为:姓名,性别,年纪,薪资## egon male 18 3000# alex male 38 30000# wupeiqi female 28 20000# yuanhao ...

  8. CentOS 7编译安装Python3.7.X

    在CentO S上通过编译安装Python3.7,添加python3软链,并使用python3. 环境 安装环境如下: Windows 10 Pro VMWare Workstation 15 Pro ...

  9. H5-移动端适配

    之前写H5页面也会遇到适配问题, 是通过媒体查询一点一点调整,始终觉得很繁琐,但一直也没去想想解决的办法. 今天专门花了一上午的时间来去研究.  小生只是刚踏入前端路的小白,对于网上各位大佬的讲解适配 ...

  10. ansible 定义主机用户和密码

    定义主机组用户和密码 [webservers] ansible[01:04] ansible_ssh_user='root' ansible_ssh_pass='AAbb0101' [root@ftp ...