在CSS3的伸缩弹性盒盒属性布局实例
Flex是一个新增的箱盒模型属性CSS3。它的出现打破了我们常用的垂直、平等、高水平、平等比例的浮动布局，但也存在一定的局限性。在Firefox和Chrome浏览器，我们需要定义自己的私有属性：火狐（-moz）和铬（Webkit）。一、框flex属性
Box Flex主要让子容器按一定的规则分隔父容器的宽度。
CSS代码将内容复制到剪贴板。
一百一十一
二百二十二
三百三十三
{。箱
显示：框；
显示：WebKit的盒子；
显示：-moz盒；
背景颜色：# FFF；
宽度：500px；
身高：100px；
边境：1px solid # 333；
保证金：0汽车；
}
{。col_1
框弯曲：1；
-moz盒弯曲：1；
WebKit的Flex 1盒；
背景颜色：# FFC；
}
{。col_2
背景颜色：# CCF；
框弯曲：2；
-moz盒弯曲：2；
WebKit的Flex 2盒；
}
{。col_3
背景颜色：# FCF；
框弯曲：2；
-moz盒弯曲：2；
WebKit的Flex 2盒；
}
小心 uff1a
父容器必须定义为显示框，它的子容器可以被划分。如果显示：框是固定的，容器是一个内联元素。如果空白：0自动使用，它是无效的，如果它是在Firefox中心。它需要通过文本对齐来控制：父容器的中心，但在Chrome下是可能的。）
三分块设置了1, 2和2，也就是说，父容器分为5个部分，占母结构宽度1／5（100），2 / 5（200px）和2 / 5（200px）分别。
以上按刻度数划分。如果一个或多个子容器设置固定宽度，而另一个子容器未设置，则宽度根据宽度设置，其余部分由上述方法计算。
CSS代码将内容复制到剪贴板。
{。col_3
背景颜色：# FCF；
宽度：50px； / *设置宽度为50px * /
}
当集装箱需要时，需要对分宽度减去中间余量，然后按比例分配。
CSS代码将内容复制到剪贴板。
{。col_2
背景颜色：# CCF；
框弯曲：2；
-moz盒弯曲：2；
WebKit的Flex 2盒；
保证金：0 20px；
}
二、框属性
以上是如何通过容器Flex划分父容器的宽度，现在父容器中的Box属性是什么。
盒子方向，框方向，框对齐，盒包装，盒线
1，盒子东方
盒子东方用于确定容器中的容器的排列是水平的还是垂直的，可选属性如下所示：
卧式立式轴座轴| | | |继承
The effects of the horizontal and inline-axis properties are consistent, all of which can be arranged horizontally, and the style of horizontal arrangement is also presented by default.When the parent container is high, the height of the subcontainer is invalid under Firefox, but it is valid under chroma.
CSS代码将内容复制到剪贴板。
{。col_1
身高：50px；
}
{。col_2
身高：80px；
}
如果你的容器没有设置高度，那么子容器的高度值就会生效，并且它们的最大值在Firefox的高度，在Chrome下面，子容器的高度很高，并且子容器的高度和最大高度的高度不一样。实际上它与父容器高度一致。
CSS代码将内容复制到剪贴板。
{。箱
不应设置高度。
}
{。col_1
身高：50px；
}
{。col_2
身高：80px；
}
{。col_3
不应设置高度。
}
垂直轴和块属性的结果是一致的，和所有的子容器可以垂直放置。他们分配的父容器的高度。如果子容器设置宽度，它也是有效的在谷歌，火狐是无效的，和其他人都在横向上表现一致。
2，盒方向
框方向用于确定子容器在父容器中的顺序，具有以下属性：
正常的反向继承| |
正常值是默认值，如上述测试的结果。
反转表示反转，与正常相反，显示3, 2和1。
3，框对齐
框对齐表示子容器在父容器中的垂直对齐方式。属性值是：
开始端中心基线| | | |伸展
起始和基线的显示效果
最终的显示效果
中心显示效果
拉伸显示效果（谷歌下，如开始）
4，盒装
箱子里装的是父容器的子容器的水平对齐，和可选的参数如下：
开始端对齐| | |
CSS代码
CSS代码将内容复制到剪贴板。
{。箱
显示：框；
显示：WebKit的盒子；
显示：-moz盒；
背景颜色：# FFF；
宽度：500px；
边境：1px solid # 333；
保证金：0汽车；
身高：100px；
WebKit的纸盒包装：开始；
-moz包：开始；
包装盒：开始；
}
col_1 col_2。，。，。col_3 {
宽度：100px；
}
开始：在框包级别，水平保持左对齐，如下所示：
结束：右对齐框包装水平，如下图所示
中心：水平对齐在框包中表示，如下图所示
正确：包装盒代表测试的双方。