CSS3弹性盒模型开发笔记（2）
本文继续分享CSS3弹性盒模型二开发笔记。前一个介绍CSS3弹性盒模型为你介绍。点击查看：CSS3弹性盒模型开发笔记（1）。Flex属性框
盒子的Flex属性可以灵活的控制盒中的子元素的展示空间。注意，展示空间包括子元素的宽度和高度，不仅子元素的列的宽度，而且面积在箱子元素占领。这个属性是在弹性布局非常重要的，它解决了采用弹性布局的百分比定义传统设计的缺点。盒子的Flex属性的基本语法：
箱Flex：
值描述：
属性值是一个整数或小数。当有多个子元素定义框Flex属性，浏览器将这些子元素的盒Flex的属性值，然后分配箱的剩余空间，根据自己的价值观。注意盒Flex属性可以正确分析后箱子的大小具有指定的空间大小，设计，更安全的方法是定义一个特定的宽度和高度属性值的盒子。
实战经验：自适应列宽设计
在传统的网页设计，如果你想把一列成三列，这是更简单的设置三个子元素的宽度为33.3%。这不完全填满父元素的宽度，和当父母的宽度足够大，用户将看到填补空白区然而，如果固定宽度的值设置为子元素，弹性布局将变得更加复杂。如果你使用箱伸缩特性，这个问题就解决了。
HTML代码：
xml代码将内容复制到剪贴板。
CSS3代码：
CSS代码将内容复制到剪贴板。
这是页面的三列布局，左边的列宽度是固定的，而右边和右边的列宽度是有弹性的。
体{
保证金：0；
填充：0；
文本对齐：中心；
}
H1、H2 {保证金：2px；}
#箱{
保证金：汽车；
文本对齐：左对齐；
宽度：1002px；
溢出：隐藏；
}
应定义一个框元素框显示，并设置元素级布局。
#箱{
显示：框；
显示：-moz盒；
显示：WebKit的盒子；
盒子东方：水平；
-moz箱东方：水平；
Webkit箱东方：水平；
}
左边栏上的框的定义
# box1 {宽度：201px；}
#箱盒，# {
边境：1px solid # CCC；
保证金：2px；
}
在框的中间部分/定义的宽度框剩余空间2 3 *
# Box2 {
框弯曲：4；
-moz盒弯曲：4；
WebKit的Flex 4盒；
}
在框的中间部分/定义的宽度框剩余空间1 3 *
#盒{
框弯曲：2；
-moz盒弯曲：2；
WebKit的Flex 2盒；
}
# box2的div，div { #盒
显示：内联；
}
演示效果：
弹性空间的实现与分布
EMSP；EMSP；默认情况下，子元素不灵活，他们将足以使其内容可见，也不会溢出。如果你想改变它的大小，你可以使用宽度和高度属性来实现它。当然，您可以使用最小高度、最小宽度、最大高度、最大宽度和其他属性来限制大小。
EMSP；EMSP；当箱伸缩性能至少是0，它变得有弹性。当元件是弹性的，可以通过以下方法来改变它的大小：
1，使用宽度、高度、最小高度、最小宽度、最大高度、最大宽度和其他属性来定义尺寸。
2，这个箱子的大小是用来限制的子元素的弹性尺寸。
3，元件的弹性尺寸受盒子所有空间的限制。
EMSP；EMSP；如果子元素没有声明的大小，它的大小将完全取决于盒子的大小，即，子元素的大小等于框的大小，乘以在所有子元素的属性值和Flex盒盒Flex属性值的百分比，使用的公式如下：
的子元素=盒子的大小*子元素盒Flex属性值/所有的子元素的属性值框Flex大小总和。
如果一个或多个子元素声明特定的大小，则包含大小。其余的弹性箱将按照上述原则共享剩余的可用空间。
由于内部图片大小的支持，该子元素的空间总是大于箱的剩余空间，并分析异常会出现。
Box Flex属性对子元素布局的影响
HTML代码：
xml代码将内容复制到剪贴板。
中间和右边是空间的一半。
CSS3代码：
CSS代码将内容复制到剪贴板。
# Box2 {
框弯曲：2；
-moz盒弯曲：2；
WebKit的Flex 2盒；
背景：# CCF；
}
#盒{
框弯曲：2；
-moz盒弯曲：2；
WebKit的Flex 2盒；
背景：# 0；
}
演示效果：
1 5自由空间的中心，右栏自由空间为4 5
CSS3代码：
CSS代码将内容复制到剪贴板。
# Box2 {
框弯曲：0.5；
-moz盒弯曲：0.5；
WebKit的Flex 0.5盒；
背景：# CCF；
}
#盒{
框弯曲：2；
-moz盒弯曲：2；
WebKit的Flex 2盒；
背景：# 0；
}
演示效果：
中间弹性显示，占据所有空闲空间，右边的列是固定的。
CSS3代码：
CSS代码将内容复制到剪贴板。
# Box2 {
框弯曲：0.5；
-moz盒弯曲：0.5；
WebKit的Flex 0.5盒；
背景：# CCF；
}
#盒{
宽度：196px；
背景：URL（图像/ web3_03 .gif）不重复；
}
演示效果：
中心失去弹性（当设置为0或复制）时，收缩显示为一条直线，右边的列自动向左移动。
CSS代码：
CSS代码将内容复制到剪贴板。
# Box2 {
框弯曲：0；
-moz盒弯曲：0；
WebKit的Flex 0盒；
背景：# CCF；
}
#盒{
宽度：196px；
背景：URL（图像/ web3_03 .gif）不重复；
}
演示效果：
以上是本文的全部内容，希望可以帮助大家学习CSS3弹性盒模型。