在css2当中，存在标准模式下的盒子模型和IE下的怪异盒子模型。这两种方案表示的是一种盒子模型的渲染模式。弹性盒子模型是css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。主要是对一个容器中的子元素进行排列、对齐和分

　　　　row：横向从左到右排列（左对齐），默认的排列方式。　　　　column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行　　　　wrap-reverse -反转 wrap

div#myRedDIV {order:2;}div#myBlueDIV {order:4;}div#myGreenDIV {order:3;}div#myPinkDIV {order:1;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的

div{display: flex;justify-content: space-around;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。justify-content29.021.0-webkit-11.028.018.0

#myBlueDiv{align-self:center;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。请参阅CSS3动画属性、CSS3动画实例。CSS3object.style.alignSelf="center&q

div{display: flex;align-items:center;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。请参阅CSS3动画属性、CSS3动画实例。CSS3object.style.alignItems="

display:flex;flex-wrap: wrap;复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-wrap29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06.1-webkit

div{display:flex;flex-direction:row-reverse;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-direction29.021.0-webkit-11.010.0-ms-28.01

display:flex;flex-flow:row-reverse wrap;效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-flow29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06

div:nth-of-type{flex-basis:80px;}效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-basis29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06.1-web

效果预览div:nth-of-type{flex-shrink:3;}浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-shrink29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06.1-webk

div:nth-of-type{flex-grow:1;}div:nth-of-type{flex-grow:3;}div:nth-of-type{flex-grow:1;}复制效果预览浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。定义和用法

一个id为container的div包含三个子div，第一个div宽度设置固定200.剩下两个用box-flex属性设置为1;3，为什么最后显示的宽度和预期不一样？col1宽度是200.整个container是600. col2和col3的flex比例是1

从这篇文章开始，会利用几个篇幅，我将跟大家分享 从CSS1到CSS3都是如何实现页面布局的。希望大家能从中领受到CSS3在布局方面的强大功能。好了，长话短说，现在开始我们的《CSS3中的弹性流体盒模型技术详解》之旅吧！在讲解CSS3中新增的弹性布局属性之前

Css3引入了新的盒模型——弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL相似，其它语言也使用相同的盒模型，如XAML 、GladeXML。使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性

上一次,我们已经了解过flex-grow的具体用法后,这周,让我们一起来见一下flex-basis这个属性. flex-shrink 定义项目的缩小比例，默认值为1，注意前提是空间不足的情况下，项目缩小。当项目1,2,3,4,5的flex-grow比例改

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。order29.021.0-webkit-11.028.018.0-moz-9.06.1-webkit-17.0定义和用法order 属性 设置或检索弹性盒模型对象的子元素出现的順序。。请参阅CS

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。请参阅CSS3动画属性、CSS3动画实例。stretch元素被拉伸以适应容器。center元素位于容器的中心。initial设置该属性为它的默认值。inherit从父元素继承该属性。

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。请参阅CSS3动画属性、CSS3动画实例。项目被拉伸以适应容器。center项目位于容器的中心。initial设置该属性为它的默认值。inherit从父元素继承该属性。

浏览器支持表格中的数字表示支持该属性的第一个浏览器的版本号。flex-wrap29.021.0-webkit-11.010.0-ms-28.018.0-moz-9.06.1-webkit-17.0定义和用法flex-wrap 属性规定flex容器是单行或者