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的弹性盒模型 ...
随机推荐
- LeetCode Golang 4. 寻找两个有序数组的中位数
4. 寻找两个有序数组的中位数 很明显我偷了懒, 没有给出正确的算法,因为官方的解法需要时间仔细看一下... func findMedianSortedArrays(nums1 []int, nums ...
- servlet缺省路径
servlet缺省路径 servlet的缺省路径(<url-pattern>/</url-pattern>)是在tomcat服务器内置的一个路径.该路径对应的是一个Defaul ...
- python之静态属性、类方法、静态方法
静态属性.类方法.静态方法 1. 静态属性:在函数前加@property,将函数逻辑”封装“成数据属性,外部直接调用函数名,如同调用属性一样.这个函数是可以调用类和实例的属性的, 静态属性的作用 ...
- python 进程 multiprocessing模块
一.multiprocess.process模块 1.process类 Process([group [, target [, name [, args [, kwargs]]]]]),由该类实例化得 ...
- 【转】python 关键字
转自:http://www.cnblogs.com/hongten/p/hongten_python_keywords.html python3.3.2中的关键字如下: The following i ...
- java数组简单逻辑代码
package cuteSnow; public class HelloWorld { // 遍历数组里面的每个数字 public static void print(int[] array){ St ...
- 【BZOJ 1305】[CQOI2009]dance跳舞
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 男生和女生每个人都分身成两个节点 即x[1],x[2]和y[1],y[2] 然后如果i和j不相互喜欢 那么add(x[i][2],y ...
- C/C++ 名正则言顺
本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50532701 名称所表达的含义极其丰富 ...
- Spring中基于Java的配置@Configuration和@Bean用法 (转)
spring中为了减少xml中配置,可以生命一个配置类(例如SpringConfig)来对bean进行配置. 一.首先,需要xml中进行少量的配置来启动Java配置: <?xml version ...
- 将maven中央仓库不存在的jar包添加到本地仓库
这里有2个案例,需要手动发出Maven命令包括一个 jar 到 Maven 的本地资源库. 要使用的 jar 不存在于 Maven 的中心储存库中. 您创建了一个自定义的 jar ,而另一个 Mave ...