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. CSS3中-webkit-overflow-scrolling: touch 的使用方法详解

    -webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果. auto 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止. touch 使用具有回弹效果的滚 ...

  2. JS数组键值,数组合并,

    eg: var arr = [] arr.test = '测试'; arr.push(1); arr.push(2); arr.obj = '对象'; console.log(arr);// [ 1, ...

  3. Redis安装手册

    转载请注明出处:http://www.cnblogs.com/robinjava77/p/5465146.html (Robin) 1)下载redis:wget http://download.red ...

  4. java下的字符流

    输入流和输出流相对于内存设备而言.将外设中的数据读取到内存中:输入将内存的数写入到外设中:输出.字符流的由来:其实就是:字节流读取文字字节数据后,不直接操作而是先查指定的编码表.获取对应的文字.比如, ...

  5. C语言中内存操作函数

      一.malloc/calloc 名称: Malloc/calloc 功能: 动态内存分配函数 头文件: #include <stdlib.h> 函数原形: void *malloc(s ...

  6. 自定义浏览器协议,实现web程序调用本地程序

    转自  http://blog.csdn.net/talking12391239/article/details/40712759 亲测可用 tencent://Message/?Uin=000000 ...

  7. R&Rstudio安装各种包

    安装rCharts的方法 install.packages('devtools') library(devtools) require(devtools) install_github('ramnat ...

  8. JTAG 学习 -SVF格式

    yxr注: 主要zt,附上自己的心得如下: 1)反观SVF文件,除了设置必要的条件之外(初始条件和TIR等四条命令),真正的运行命令就两条,SIR向JTAG TAP状态机的IR寄存器送命令,SDR往J ...

  9. 封装、调用ajax

    1.JavaScript代码 //封装ajaxfunction ajax(obj) { var xhr = new createXHR(); obj.url = obj.url + '?rand=' ...

  10. SpringMVC学习笔记(三)

    一.SpringMVC使用注解完成 1.首先,导入SpringMVC需要的jar包. 2.添加Web.xml配置文件中关于SpringMVC的配置 <!--configure the setti ...