1.box-flex属性规定框的子元素是否可伸缩其尺寸。

父元素必须要声明display:box;子元素才可以用box-flex。

语法：box-flex:value;

示例：

.test_box {display: -moz-box;display: -webkit-box;display:box;width: 800px;margin: 40px auto;padding: 20px;

background: #f0f3f9;}

.list {padding: 0 1em; font: bold 36px/200px monaco;text-shadow: 1px 1px #eee;}

.list_one { -moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background-color: yellow;}

.list_two{-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;background-color: #99CC00;}

.list_three {-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background-color: paleturquoise;}

结果： 图片

可以指定某个子元素的宽度，剩下的部分平分。

示例：

.test_box {display: -moz-box;display: -webkit-box;display: box;width: 800px;margin: 40px auto;padding: 20px;

background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/200px monaco;

text-shadow: 1px 1px #eee;}

.list_one {-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background: #00CC99;}

.list_two {-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;background: #99FF00;}

.list_w300 { width: 300px; background: #CCCCFF}

结果： 图片

2.box-orient

用来确定子元素的方向，是横着还是竖着。

可选值：horizontal | vertical | inline-axis | box-axis | inherit inline-axis是默认的 horizonta inline-axis 是一样的让元素横着 vertical

box-axis 是一样的让元素纵列。

示例：

.test_box {width: 300px; margin: 0 auto;display: -moz-box;

display: -webkit-box;display: box;box-orient:horizontal;padding: 20px;background: #f0f3f9;}

.list{padding: 0 1em;font: bold 36px/120px monaco; text-shadow: 1px 1px #eee;-webkit-box-flex: 1;}

.one{background: #99FF00;}

.two{background: #00CC99}

.three{background:#CCCC00}

结果：如图

3.box-direction

用来确定子元素的排列顺序。可选值：

onrmal | revers | inherit onrmal是默认值按着正常顺序排列，从左到右

从前到后,revers表示反转。

示例：

.test_box {display: -moz-box;display: -webkit-box;display: box;-moz-box-direction:reverse;-webkit-box-direction:reverse;

box-direction:reverse;width: 300px;margin: 20px auto;padding: 10px;background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/150px monaco;text-shadow: 1px 1px #eee;}

.list_one {-moz-box-flex: 1;-webkit-box-flex: 1;box-flex: 1;background: yellow;}

.list_two{-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;background: #99CC00;}

.three{background: #CCCCFF}

结果： 如图

4.box-align与box-pack

决定盒子内部剩余空间怎么使用，行为效果为对齐方式。

box-align 为垂直方向上的空间利用，box-pack 为水平方向上的空间利用。

box-align 可选参数： start | end | center | baseline | stretch

stretch为默认父标签的高度有多高，子元素就有多高。start表示底边对齐

end 为底部对齐，center居中对齐，baseline 基线对齐。

示例：

.test_box {margin: 0 auto;display: -moz-box;display: -webkit-box;

display: -o-box;display: box;-moz-box-align:end;

-webkit-box-align:end; -o-box-align:end; box-align:end;

width: 300px;height: 200px;padding: 20px;background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/120px monaco;text-shadow: 1px 1px #eee;}

.one{background: #99FF00;}

.two{background: #00CC99}

.three{background:#CCCC00}

结果：如图

box-pack可选值： start | end | center | justify

start为默认值， justify表示两端对齐。

示例：

.test_box {margin: 0 auto;display: -moz-box;display: -webkit-box;

display: -o-box;display: box;-moz-box-pack:justify;

-webkit-box-pack:justify; -o-box-pack:justify; box-pack:justify;

width: 300px;height: 200px;padding: 20px;background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/120px monaco;

text-shadow: 1px 1px #eee;}

.one{background: #99FF00;}

.two{background: #00CC99}

.three{background:#CCCC00}

结果：如图

5.box-lines

用来决定子元素是否可以换行显示，有两个可以选的值：single | mutiple

single 默认值，不换行。mutiple 换行多行显示。

示例：

.test_box {margin: 0 auto;display: -moz-box;display: -webkit-box;

display: -o-box;display: box;-moz-box-lines:multiple;

-webkit-box-lines:multiple;-o-box-lines:multiple;

box-lines:multiple; width: 300px;

height: 200px;padding: 20px;background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/120px monaco;text-shadow: 1px 1px #eee;}

.one{background: #99FF00;}

.two{background: #00CC99}

.three{background:#CCCC00}

结果：如图

6.box-ordinal-group

改变子元素的顺序，值为数字，数字越小越排在前面。

示例：

.test_box {display: -moz-box;display: -webkit-box;display: box;

width: 300px;margin: 40px auto;padding: 20px;background: #f0f3f9;}

.list {padding: 0 1em;font: bold 36px/200px monaco;text-shadow: 1px 1px #eee;}

.list_one {-moz-box-flex: 1;-webkit-box-flex: 1; box-flex: 1;

-moz-box-ordinal-group: 1;-webkit-box-ordinal-group: 1;box-ordinal-group: 1;background: #99CC00;}

.list_two{-moz-box-flex: 2;-webkit-box-flex: 2;box-flex: 2;-moz-box-ordinal-group: 2;-webkit-box-ordinal-group: 2;

box-ordinal-group: 2;background: #CC33CC;}

.three{ background: #CCCC00}

结果：如图

demo下载https://github.com/ningmengxs/css3.git

css3弹性盒子模型之box-flex

css3弹性盒子模型之box-flex 浏览器支持 目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chr ...

css3弹性盒子模型

当下各种手机,平板尺寸不一,如果盒模型只能固定尺寸,不能随意压缩,将不能很好的迎合这个时代.所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model). 弹性盒模型可以水平布 ...

CSS3中的弹性盒子模型

介绍 在css2当中,存在标准模式下的盒子模型和IE下的怪异盒子模型.这两种方案表示的是一种盒子模型的渲染模式.而在css3当中,新增加了弹性盒子模型,弹性盒子模型是一种新增加的强大的.灵活的布局方案 ...

CSS3弹性盒模型flexbox布局基础版

原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

css3基础教程：CSS3弹性盒模型

今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

CSS3弹性盒模型布局模块介绍

来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

flexbox弹性盒子模型

这几天在做移动端的web开发,遇到了一些问题,之前没有折腾过这方面的东西,这次好好吸收下 css3的flexbox--弹性盒子模型,这个盒模型决定了一个盒子在其他盒子中的分布方式及如何处理可用的空间. ...

CSS box-flex属性，然后弹性盒子模型简介

今天做项目的时候发现一个css3的新属性flex 一.什么是flex 它的作用是能够按照设置好的规则来排列容器内的项目,而不必去计算每一个项目的宽度和边距.甚至是在容器的大小发生改变的时候,都可以重新 ...

CSS box-flex属性，然后弹性盒子模型简介(转)

一.淡淡的开头语 昨天趁着不想工作的时间间隙闲逛24ways,在My CSS Wish List一文中,见到了个新鲜的CSS属性,就是题目中的box-flex,以前没有见过,顿生疑惑,不知是骡子还是马 ...

随机推荐

day11---异步IO\数据库\队列\缓存

一.RabbitMQ队列 RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议. MQ全称为Message Queue, 消息 ...

Ogre1.8地形和天空盒的建立(一块地形)

转自:http://www.cnblogs.com/WindyMax/ 研究Ogre的程序笔记 编译环境 WIN7 32  VS2008   Ogre的版本 1.8 Ogre的地形算法是采用Geome ...

String类源码分析(JDK1.7)

以下学习根据JDK1.7String类源代码做注释 public final class String implements java.io.Serializable, Comparable

Python的基本语法，涵盖数据类型、循环判断、列表、map和set等

以#开头的语句是注释 当语句以冒号“:”结尾时,缩进的语句视为代码块.一般缩进4个空格 Python程序是大小写敏感的,如果写错了大小写,程序会报错. Python的数据类型 整型 浮点型 字符串 布 ...

protocol buffer介绍(protobuf)

一.理论概述0.参考资料入门资料:https://developers.google.com/protocol-buffers/docs/javatutorial更详细的资料:For more det ...

bzoj(矩阵快速幂)

题意:定义Concatenate(1,N)=1234567……n.比如Concatenate(1,13)=12345678910111213.给定n和m,求Concatenate(1,n)%m. (1 ...

Hibernate的dynamic-insert和dynamic-update的使用

Hibernate在初始化的时候,默认按照配置为表预定义insert,delete,update,select(by id)的SQL语句放在session中,其中insert,update,selec ...

maven pom添加本地jar，不提交私库

taobao-sdktaobaosdk

C++ 字面量

https://docs.microsoft.com/en-us/cpp/cpp/string-and-character-literals-cpp?view=vs-2017 C++ supports ...

卡方分布 | t检验 | F检验 | 卡方检验 | 假设检验 | 各种检验持续总结

Chi-square distribution introduction 这个视频真的好,完美地解释了卡方统计量是怎么来的! 我们有一个标准正态分布的总体,我们从其中抽一次,取该值的平方就是Q1统计量 ...