伸缩盒 Flexible Box(旧)
box-orient box-pack box-align box-flex box-flex-group box-ordinal-group box-direction box-lines
(1)box-flex:<number>
注意两点即可 a: 以上所有元素必须结合“display: -webkit-box;”使用, 父类的样式里必须有改属性
b: 父类剩余空间按百分比分配
(2) box-orient: horizontal | vertical | inline-axis | block-axis 判断子元素是水平还是垂直显示
注意 a: block-axis和horizontal 的话,box-flex的数值就好像没有效果了
(3) box-flex-group: <integer>
动态给数值较大的组分配其内容所需的实际空间(如无内容、padding、border则不占空间),剩余空间则均分给数值最小的那个组(可能有1个或多个元素)
.box {
display: -webkit-box;
display: -moz-box;
display: -ms-box;
background: #000;
width: 240px;
height: 100px;
margin:;
padding: 10px;
list-style: none;
vertical-align: top;
/* -webkit-box-orient: vertical; */
}
.box li:nth-child(1) {
-webkit-box-flex:;
-moz-box-flex:;
-ms-box-flex:;
-webkit-box-flex-group:;
-moz-box-flex-group:;
-ms-box-flex-group:;
background: #666;
}
.box li:nth-child(2) {
-webkit-box-flex:;
-moz-box-flex:;
-ms-box-flex:;
-webkit-box-flex-group:;
-moz-box-flex-group:;
-ms-box-flex-group:;
background: #999;
}
.box li:nth-child(3) {
-webkit-box-flex:;
-moz-box-flex:;
-ms-box-flex:;
-webkit-box-flex-group:;
-moz-box-flex-group:;
-ms-box-flex-group:;
background: #ccc;
}
(4)box-ordinal-group:<integer>
用整数值来定义伸缩盒对象的子元素显示顺序。
注意 a: 值越大越往后
(5)box-direction:normal | reverse
注意 a: reverse只是顺序上的改变,并不是以y 轴旋转
(6) box-lines:single | multiple
注意 a: 目前所有主流浏览器都不支持box-lines属性
分析情况都是在box-orient: horizontal时
(7)box-pack:start | center | end | justify |
(8)box-align:start | end | center | baseline | stretch |
水平的 start 相当于左对齐 center 左右居中 end 右对齐 justify 两端对齐 | start从元素其实对齐 center 上下对齐 end 底端对齐 stretch横向排列时子元素自适应父元素 |
![]() |
|
分析情况都是在box-orient: vertical 时 ,两者恰好相反
伸缩盒 Flexible Box(旧)的更多相关文章
- CSS3伸缩盒Flexible Box
这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的 ...
- 伸缩盒 Flexible Box(新)
flex flex-grow flex-shrink flex-basis flex-flow flex-direction flex-wrap align-content ...
- css3 新旧伸缩盒的异同
由于不需要理会IE浏览器,伸缩盒(flexible box)移动端开发中非常好用! 工作中使用APICLOUD开发手机App,老板要求兼容到安卓2.3(新版的需要安卓4.4以上),所以一直使用的是旧版 ...
- 第10章 布局样式相关-伸缩布局(Flexible Box)
伸缩布局(一) CSS3引入了一种新的布局模式--Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或 ...
- CSS3 Flexbox(伸缩盒/弹性盒模型)可视化指南
在http://css.doyoe.com/(CSS参考手册)中,本文对应其中的伸缩盒 引入 Flexbox布局官方称为CSS Flexible Box Layout Module是一个CSS3新的布 ...
- CSS3弹性伸缩布局(一)——box布局
CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...
- 使用CSS3伸缩盒实现图片垂直居中
用CSS实现图片垂直居中的方法有很多,针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中. 代码如下: <div class="box"> <img src=& ...
- CSS3_伸缩盒模型_弹性布局_等分布局_flex 布局
伸缩盒模型 CSS3 引入的布局模式 Flexbox 布局 主要思想: 让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间. 特点: display: flex; 只能控制其子元 ...
- CSS盒子模型之CSS3可伸缩框属性(Flexible Box)
CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...
随机推荐
- leetcode 202
202. Happy Number Write an algorithm to determine if a number is "happy". A happy number i ...
- location.hash详解
一.#的涵义 #代表网页中的一个位置.其右面的字符,就是该位置的标识符.比如, http://www.example.com/index.html#print 就代表网页index.html的prin ...
- matlab clear
clear 删除工作空间中的项目,释放系统内存 语法: clear clear name clear name1 name2 name3... clear global name clear -reg ...
- 安装zabbix报错configure: error: libcurl library not found
libcurl 和libcurl-devel都已经安装 且大于7.13.1 但还是报错,这时需要在configure 指定curl路径即可 ./configure --prefix=/usr/loca ...
- asp.net 查询好的数据后 排序显示在桌面上
select top 10 * ,row()_number over ( order by 字段 desc) as rownum from 表 row()_number;简单的说row_numbe ...
- ubuntu文本模式/终端中文乱码解决
ubuntu文本模式/终端中文乱码解决 1.Alt+Ctrl+F1 进入第一个终端tty1,发现中文乱码. 2.安装zhcon. sudo apt-get install zhcon3 输入下面命令, ...
- 使用github参与开源项目
github上有很多非常优秀的开源项目,作为开源项目的受益者,你否想过为开源项目贡献自己的代码?
- MongoDB的基础知识
本人只是软件开发的一个菜鸟,在学习MongoDB,总结了一点自己学习的知识,监督自己学习. 如果文章中有不足的地方,还请大神指点迷津,纠正改错,谢谢. 一.MongoDB简介 MongoDB是一个基于 ...
- 批量部署ssh信任关系
要求1:大批量部署SSH信任关系,在A文件分发服务器上大批量部署WEB层面信任关系文件分发服务器为:10.0.3.9 登录用户为:zhangsan WEB层IP段:10.0.3.10~10.0.3.6 ...
- 常用的几个DOS批处理
1.启动ORACLE net start OracleServiceQSJBnet start OracleDBConsoleqsjbnet start OracleOraDb10g_home1TNS ...