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(旧)的更多相关文章

  1. CSS3伸缩盒Flexible Box

    这是一种全新的布局,在移动端非常实用,IE对此布局的相关的兼容不是很好,Firefox.Chrome.Safrai等需要加浏览器前缀. 先说说这种布局的特点: 1)移动端由于屏幕宽度都不一样,在布局的 ...

  2. 伸缩盒 Flexible Box(新)

    flex   flex-grow    flex-shrink   flex-basis  flex-flow   flex-direction   flex-wrap  align-content  ...

  3. css3 新旧伸缩盒的异同

    由于不需要理会IE浏览器,伸缩盒(flexible box)移动端开发中非常好用! 工作中使用APICLOUD开发手机App,老板要求兼容到安卓2.3(新版的需要安卓4.4以上),所以一直使用的是旧版 ...

  4. 第10章 布局样式相关-伸缩布局(Flexible Box)

    伸缩布局(一) CSS3引入了一种新的布局模式--Flexbox布局,即伸缩布局盒模型(Flexible Box),用来提供一个更加有效的方式制定.调整和分布一个容器里项目布局,即使它们的大小是未知或 ...

  5. CSS3 Flexbox(伸缩盒/弹性盒模型)可视化指南

    在http://css.doyoe.com/(CSS参考手册)中,本文对应其中的伸缩盒 引入 Flexbox布局官方称为CSS Flexible Box Layout Module是一个CSS3新的布 ...

  6. CSS3弹性伸缩布局(一)——box布局

    CSS3弹性伸缩布局简介 2009年,W3C提出了一种崭新的方案----Flex布局(即弹性伸缩布局),它可以简便.完整.响应式地实现各种页面布局,包括一直让人很头疼的垂直水平居中也变得很简单地就迎刃 ...

  7. 使用CSS3伸缩盒实现图片垂直居中

    用CSS实现图片垂直居中的方法有很多,针对移动端设备可以用CSS3伸缩盒来实现图片垂直居中. 代码如下: <div class="box"> <img src=& ...

  8. CSS3_伸缩盒模型_弹性布局_等分布局_flex 布局

    伸缩盒模型 CSS3 引入的布局模式 Flexbox 布局 主要思想: 让容器有能力让其子项目能够改变其宽度,高度,以最佳方式填充可用空间. 特点: display: flex;    只能控制其子元 ...

  9. CSS盒子模型之CSS3可伸缩框属性(Flexible Box)

    CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布 ...

随机推荐

  1. leetcode 202

    202. Happy Number Write an algorithm to determine if a number is "happy". A happy number i ...

  2. location.hash详解

    一.#的涵义 #代表网页中的一个位置.其右面的字符,就是该位置的标识符.比如, http://www.example.com/index.html#print 就代表网页index.html的prin ...

  3. matlab clear

    clear 删除工作空间中的项目,释放系统内存 语法: clear clear name clear name1 name2 name3... clear global name clear -reg ...

  4. 安装zabbix报错configure: error: libcurl library not found

    libcurl 和libcurl-devel都已经安装 且大于7.13.1 但还是报错,这时需要在configure 指定curl路径即可 ./configure --prefix=/usr/loca ...

  5. asp.net 查询好的数据后 排序显示在桌面上

    select top 10 * ,row()_number over ( order by 字段 desc) as rownum  from  表 row()_number;简单的说row_numbe ...

  6. ubuntu文本模式/终端中文乱码解决

    ubuntu文本模式/终端中文乱码解决 1.Alt+Ctrl+F1 进入第一个终端tty1,发现中文乱码. 2.安装zhcon. sudo apt-get install zhcon3 输入下面命令, ...

  7. 使用github参与开源项目

    github上有很多非常优秀的开源项目,作为开源项目的受益者,你否想过为开源项目贡献自己的代码?

  8. MongoDB的基础知识

    本人只是软件开发的一个菜鸟,在学习MongoDB,总结了一点自己学习的知识,监督自己学习. 如果文章中有不足的地方,还请大神指点迷津,纠正改错,谢谢. 一.MongoDB简介 MongoDB是一个基于 ...

  9. 批量部署ssh信任关系

    要求1:大批量部署SSH信任关系,在A文件分发服务器上大批量部署WEB层面信任关系文件分发服务器为:10.0.3.9 登录用户为:zhangsan WEB层IP段:10.0.3.10~10.0.3.6 ...

  10. 常用的几个DOS批处理

    1.启动ORACLE net start OracleServiceQSJBnet start OracleDBConsoleqsjbnet start OracleOraDb10g_home1TNS ...