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的弹性盒模型 ...
随机推荐
- HDU 2955 Robberies【01背包】
解题思路:给出一个临界概率,在不超过这个概率的条件下,小偷最多能够偷到多少钱.因为对于每一个银行都只有偷与不偷两种选择,所以是01背包问题. 这里有一个小的转化,即为f[v]代表包内的钱数为v的时候, ...
- 手游服务器端接入google的SDK
在接入google的SDK之前,当然先要用你的google开发者账号要去申请你接入的应用,这些步骤就直接省略了具体的步骤可以查看这篇博文:http://blog.csdn.net/hjun01/art ...
- 关于Android Studio更新后一直Refreshing的解决办法!
今天更新了一下studio一直是这个问题 查了很多资料终于解决了 造成这个问题的原因是要更新的gradle版本和studio安装路径中的gradle版本不一致导致的 把他们改成一致的即可 在这个目录里 ...
- 十款APP开发框架
对于大部分Web开发人员,HTML.CSS和 Java是他们最熟练的开发技能.然而,开发一个原生的移动App,对他们来说却是完全陌生的领域.因为开发Android,iOS 或 Windows Phon ...
- this self指针
this 和 self指针 为函数提供了运行上下问:为函数提供了当前对象的其实地址,方便函数的对对象的访问.
- X位的有/无符号整数
目录 X位的有符号整数 X位的无符号整数 知识点来自leetcode整数翻转 X位的有符号整数 以4位为例,不管多少位都是相同的概念 在有符号整数中,第一位二进制位用来表示符号,0为正,1为负 最大值 ...
- Pyhton学习——Day9(阶段性练习)
# 1.文件内容如下,标题为:姓名,性别,年纪,薪资## egon male 18 3000# alex male 38 30000# wupeiqi female 28 20000# yuanhao ...
- CentOS 7编译安装Python3.7.X
在CentO S上通过编译安装Python3.7,添加python3软链,并使用python3. 环境 安装环境如下: Windows 10 Pro VMWare Workstation 15 Pro ...
- H5-移动端适配
之前写H5页面也会遇到适配问题, 是通过媒体查询一点一点调整,始终觉得很繁琐,但一直也没去想想解决的办法. 今天专门花了一上午的时间来去研究. 小生只是刚踏入前端路的小白,对于网上各位大佬的讲解适配 ...
- ansible 定义主机用户和密码
定义主机组用户和密码 [webservers] ansible[01:04] ansible_ssh_user='root' ansible_ssh_pass='AAbb0101' [root@ftp ...