(父元素加) :

/*新版弹性盒模型*/
/* 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. Kattis - ACM Contest Scoring

    ACM Contest Scoring Our new contest submission system keeps a chronological log of all submissions m ...

  2. 实验楼—Mysql—查找最爱学的课程

    转载:https://www.shiyanlou.com/challenges/2651 背景 从上节题目构建的课程数据库中提取每个用户最爱学的课程数据. 右边桌面是实验楼的服务器,服务器中的 MyS ...

  3. SpringBoot中打包设置,将配置文件打包在外部

    一.每次用maven的打包工具打包的时候 总是将配置文件一起打包进jar中!配置文件有点小修改就要重新打包很麻烦!!!!为了解决这一麻烦!找 了很多方法,下面的配置已经实现可用 我的项目目录结构如下 ...

  4. DCL授权命令

    create user 用户名//创建用户    grant DBA to 用户名//授权    revoke //撤销权限

  5. UVA 11478 Halum

    Halum Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVA. Original ID: 114 ...

  6. FPGA实现网络通信时的网络字节序问题

    在上位机软件发送字符abcd 在鲨鱼上抓包 用逻辑分析仪从FPGA网络接收管脚分析 数据接收后存储在位宽为8bit的ram中 从ram中读32bitUDP数据为 64636261 依据以上那个现象, ...

  7. 大话设计模式C++实现-第17章-适配器模式

    一.UML图 关键词:Client须要Request()函数,Adaptee提供的是SpecificRequest()函数,Adapter提供一个Request()函数将Adaptee和Specifi ...

  8. Apicloud自定义模块

    各种坑,折腾了两天才有点头绪.我用的是Android Studio编辑器,官网是Eclipse的视频.文档也比较蛋疼. 自定义模块的目录结构要按照下面来处理 其中res_模块名,存放res和Andro ...

  9. zzuoj--10400--海岛争霸(并查集)

    10400: B.海岛争霸 Time Limit: 2 Sec  Memory Limit: 128 MB Submit: 128  Solved: 46 [Submit][Status][Web B ...

  10. CxImage学习

    官方下载地址是:http://www.xdp.it/cximage/ 打开工程后可以看到下例这些工程: - CxImage - CxImageCrtDll - CxImageMfcDll - dome ...