-
目前，Box Flex属性还没有得到Firefox、Opera和Chrome浏览器的全面支持。然而，Firefox可以通过他们的私人属性定义，Firefox（-moz -），歌剧（O）和Chrome或Safari（WebKit）。
一、框flex属性
Box Flex主要让子容器按一定的规则分隔父容器的宽度。
HTML代码：
xml代码将内容复制到剪贴板。
01
02
03
CSS代码：
CSS代码将内容复制到剪贴板。
包{。
宽度：600px；
身高：200px；
显示：-moz盒；
显示：WebKit的盒子；
显示：框；
}
第一节{。
背景：橙色；
-moz盒弯曲：3；
WebKit的Flex 3盒；
框弯曲：3；
}
二{。
背景：紫色；
-moz盒弯曲：2；
WebKit的Flex 2盒；
框弯曲：2；
}
第三节{。
-moz盒弯曲：1；
WebKit的Flex 1盒；
框弯曲：1；
背景：绿色；
}
显示效果：
解释uff1a
我们必须定义CSS属性到父包容器显示：箱集装箱可分（如果显示：盒容器定义为使用保证金：为0px auto内联元素，所以中心是无效的，为了使中心只有其母文本对齐：中心）；第一节、第二节和第三节分别对箱Flex设置3, 2, 1，也就是说三个容器将包600px父容器的宽度分为6个部分，第一节分别占母结构宽度的3／6或300px，第一占母结构宽度的2／6或200px首先，占1 / 6 100px母体结构的宽度。
以上按比例划分。如果一个子容器或多个子容器设置固定宽度，将如何分配
如果一个或更多的子容器设置一个固定宽度，不设置其他容器，计算方法是这样的：如果子容器设置一个固定宽度的值，使用容器直接设置的宽度值未设置基于父容器的子容器的宽度减去设定固定宽度，根据基于宽度剩下的一定比例分配。请看下面的代码：
HTML代码：
xml代码将内容复制到剪贴板。
01
02
03
CSS代码：
CSS代码将内容复制到剪贴板。
包{。
宽度：600px；
身高：200px；
显示：-moz盒；
显示：WebKit的盒子；
显示：框；
}
第一节{。
背景：橙色；
-moz盒弯曲：3；
WebKit的Flex 3盒；
框弯曲：3；
}
二{。
背景：紫色；
-moz盒弯曲：1；
WebKit的Flex 1盒；
框弯曲：1；
}
第三节{。
宽度：200px； / /设置一个固定宽度
背景：绿色；
}
显示效果：
解释uff1a
首先设置一个固定宽度200px，父容器的子容器的600px减改变左200px 400px宽度，根据箱伸缩值集被划分400px宽度值，第一节有3 / 4 300px，第二节1 / 4 100px。
在上面的代码的基础上，我们增加保证金：0px 50px的二次容器，所以有子容器之间有一定的间隔，以及如何分配的子容器的宽度，然后看着它
CSS代码：
CSS代码将内容复制到剪贴板。
包{。
宽度：600px；
身高：200px；
显示：-moz盒；
显示：WebKit的盒子；
显示：框；
}
第一节{。
背景：橙色；
-moz盒弯曲：3；
WebKit的Flex 3盒；
框弯曲：3；
}
二{。
背景：紫色；
-moz盒弯曲：1；
WebKit的Flex 1盒；
框弯曲：1；
保证金：0px 50px； / /添加边缘属性
}
第三节{。
宽度：200px；
背景：绿色；
}
显示效果：
解释uff1a
父容器的宽度600px减200px设置基于子容器减100px（2times；50）300px左，根据箱伸缩值的设置由分工300px宽度值，第一节有3 / 4 225px，第二节1 / 4 75px。
二、框属性
上CSS3弹性盒模型盒flex箱Flex如何划分父容器的宽度的分布，并解释，然后看看父容器的属性，包括框属性。具体属性如下：
盒盒盒盒包装东方方向对齐| | | |框线
1，盒子东方
盒子东方（东方翻译成更准确）是用来确定容器的安排在父容器，无论是水平或垂直：
卧式立式轴座轴| | | |继承
水平轴和同轴轴解释：
将水平或内联属性设置为框的效果似乎是相同的。副容器可以水平布置。它们之间有什么区别如果父容器的选择水平或内嵌的子容器的水平排列轴属性，它指定的父容器的宽度的分区。如果父容器定义的高度值，容器高度设置为无效状态，所有的子容器的父容器的高度等于价值的高度；如果父容器不设置高度值，容器的高度值是有效的和最大的子容器的高度值的高度。
HTML代码：
xml代码将内容复制到剪贴板。
01
02
03
CSS代码：
CSS代码将内容复制到剪贴板。
包{。
宽度：600px；
身高：200px；
显示：-moz盒；
显示：WebKit的盒子；
显示：框；
-moz箱东方：水平；
Webkit箱东方：水平；
盒子东方：水平；横向排列
}
第一节{。
背景：橙色；
-moz盒弯曲：1；
WebKit的Flex 1盒；
框弯曲：1；
}
二{。
背景：紫色；
-moz盒弯曲：2；
WebKit的Flex 2盒；
框弯曲：2；
}
第三节{。
宽度：100px；
背景：绿色；
}
显示效果：
竖轴与断轴解释：
将垂直或块轴属性设置为框（此属性是默认值）似乎具有相同的效果。它可以垂直排列子容器。它们之间有什么区别如果父容器为子容器的垂直排列选择垂直或块轴属性，则它被分配到父容器的高度。此时，如果父容器定义宽度值，子容器的宽度值设置无效。如果父容器没有设置宽度值，子容器的宽度值是有效的，并且最大宽度值的子容器的宽度被占用。
HTML代码：
xml代码将内容复制到剪贴板。
01
02
03
CSS代码：
CSS代码将内容复制到剪贴板。
包{。
宽度：600px；
身高：200px；
显示：-moz盒；
显示：WebKit的盒子；
显示：框；
-moz箱东方：垂直；
Webkit框定位：垂直；
盒子东方：垂直；垂直排列
}
第一节{。
背景：橙色；
-moz盒弯曲：1；
WebKit的Flex 1盒；
框弯曲：1；
}
二{。
背景：紫色；
-moz盒弯曲：2；
WebKit的Flex 2盒；
框弯曲：2；
}
第三节{。
身高：100px；
背景：绿色；
}
显示效果：
继承了：
继承属性是允许子容器继承父容器的相关属性。
2，盒方向
框方向用于确定子容器在父容器中的顺序，具体属性如下面的代码所示：
正常的反向继承| |
正常值是默认值。
按照HTML文档结构的序列。下面的代码，如果箱方向是正常的，该结构显示第一、第二节，和第三。反过来
HTML代码：
xml代码将内容复制到剪贴板。
01
02
03
CSS代码：
CSS代码将内容复制到剪贴板。
包{。
宽度：600px；
身高：200px；
显示：-moz盒；
显示：WebKit的盒子；
显示：框；
-moz箱方向：正常； / /正常的默认设置
Webkit框方向：正常； / /正常的默认设置
箱方向：正常； / /正常的默认设置
}
第一节{。
背景：橙色；
-moz盒弯曲：1；
WebKit的Flex 1盒；
框弯曲：1；
}
二{。
背景：紫色；
-moz盒弯曲：2；
WebKit的Flex 2盒；
框弯曲：2；
}
第三节{。
宽度：100px；
背景：绿色；
}
显示效果：
反转表示反转：
如上图所示，一般是按第一、第二节和第三节。如果逆向反演的设置，其结构的顺序是一、二和第一..
HTML代码：
xml代码将内容复制到剪贴板。
01
02
03
CSS代码：
CSS代码将内容复制到剪贴板。
包{。
宽度：600px；
身高：200px；
显示：-moz盒；
显示：WebKit的盒子；
显示：框；
-moz箱方向： / /扭转；扭转
Webkit框方向： / /扭转；扭转
框方向：反向； /设置为反向
}
第一节{。
背景：橙色；
-moz盒弯曲：1；
WebKit的Flex 1盒；
框弯曲：1；
}
二{。
背景：紫色；
-moz盒弯曲：2；
WebKit的Flex 2盒；
框弯曲：2；
}
第三节{。
宽度：100px；
背景：绿色；
}
显示效果：
3，框对齐
盒对齐是父容器的子容器的垂直对齐，和可选的参数如下：
开始端中心基线| | | |伸展
HTML代码：
xml代码将内容复制到剪贴板。
01
02
03
CSS代码：
CSS代码将内容复制到剪贴板。
包{。
宽度：600px；
身高：108px；
显示：-moz盒；
显示：WebKit的盒子；
显示：框；
-moz盒对齐：拉伸；
Webkit框对齐：拉伸；
- o-box-align：拉伸；
框对齐：拉伸；
}
包装段{
身高：80px；
}
第一节{。包装。
背景：橙色；
-moz盒弯曲：1；
WebKit的Flex 1盒；
框弯曲：1；
}
二{。包装。
背景：紫色；
-moz盒弯曲：2；
WebKit的Flex 2盒；
框弯曲：2；
身高：108px；
}
。包装。一{
宽度：100px；
背景：绿色；
}
起点
框对齐表示顶部对齐，如下图所示
终点
框对齐表示底部对齐，如下图所示
中心
框对齐表示中心对齐，如下图所示
拉伸
框对齐拉伸并拉伸到父容器的高度。
4，盒装
箱子里装的是父容器的子容器的水平对齐，和可选的参数如下：
开始端对齐| | |
HTML代码：
xml代码将内容复制到剪贴板。
01
02
03
CSS代码：
CSS代码将内容复制到剪贴板。
包{。
宽度：600px；
身高：108px；
border: 1px solid红；
显示：-moz盒；
显示：WebKit的盒子；
显示：框；
-moz包：结束；
WebKit的纸盒包装：结束；
- o-box-pack：结束；
包装盒：结束；
}
包装段{
宽度：100px；
}
第一节{。包装。
背景：橙色；
}
二{。包装。
背景：紫色；
}
。包装。一{
背景：绿色；
}
起点
框包表示左侧的水平对齐，如下图所示
终点
右对齐在框包级别，如下图所示
中心
框包表示水平对齐，如下图所示
证明
盒子包表示父级容器的宽度（唯一遗憾的是Firefox和Opera暂时不受支持，只有Safari、Chrome支持）。