CCS3 伸缩盒模型（最新）

CSS3伸缩盒对使用响应式布局的网站的开发带来了很好的实现方式。它可以在不使用浮动（float）和定位（position）的情况下实现块级（block）元素的水平排列。并且可以 把父元素的宽度按照比例分配子元素，闲话不多少直接看例子。

 

1、要实现伸缩盒模式必须给父元素设置：display:flex （老版本display:box 需要加对应的浏览器前缀），实现伸缩盒模式的显示方式。

2、通过设置子元素的flex-grow属性来分配比例

<div id="parent">
    <div id="child1">01</div>
    <div id="child2">02</div>
    <div id="child3">03</div>
</div>

 1 #parent{

    width:1000px;
    height:200px;
    display:flex; /* 子元素水平排列 */
}
#parent div{
    font-size:100px;
    line-height:200px;
    text-align:center;
}
#child1{
    width:200px;
    background-color:orange;
}
#child2{
    flex-grow:1; /* 分配比例因子 */   
    background-color:pink;
}
#child3{
    flex-grow:3; /* 分配比例因子 */ 
21　　　background-color:green; 
22 　}

分析：parent 的宽度为1000px，child1的宽度为200px，所以child2 + child3 = 1000 - 200 = 800px，因为 child2 和 child3 都设置了flex-grow:1 和 flex-grow:3;所以child2 的宽度为 800 * 1/（1+3） = 200px,child3 的宽度为 800 * 3/（1+3）。

注意：1、如果子元素有固定的宽度，其他子元素按比例分配剩余的宽度 即：1000 - 200 = 800px;

　　　2、均分总数为各个子元素中flex-grow属性值的和 即：1 + 3 = 4，各元素的宽度比例为 flex-grow / (flex-grow的总和) 即：1/(1+3)，3/(1+3);

 排列方向

flex-direction 属性用来设置子元素的排列方向，该属性总共有四个参数：row (横向) row-reverse (横向反转) column (纵向) column-reverse (纵向反转)

#parent{
    width:1000px;
    height:200px;
    display:flex;
    flex-direction:row-reverse;/* 横向反转 */
}

 对齐方式

justify-content 属性用来定义子元素的对齐方式，其属性值包括：flex-start (左对齐) flex-end (右对齐) center (中间对齐)

#parent{
    width:1000px;
    height:200px;
    display:flex;
    justify-content:center; /* 中间对齐 */
    background-color:#ff0;
    flex-direction:row-reverse;
}
#parent div{
    font-size:100px;
    line-height:200px;
    text-align:center;
}
#child1{
    width:200px;
    background-color:orange;
}
#child2{
    width:200px;
    background-color:pink;
}
#child3{
    width:200px;
    background-color:green;
}

align-items 垂直对齐  flex-start (垂直顶对齐) flex-end (垂直底对齐) center (垂直居中对齐)

#parent{
    width:1000px;
    height:200px;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    background-color:#ff0;
    flex-direction:row-reverse;
}
#parent div{
    font-size:100px;
    line-height:200px;
    text-align:center;
}
#child1{
    width:200px;
    background-color:orange;
}
#parent #child2{
    width:200px;
    height:100px;
    font-size:50px;
    line-height:100px;
    background-color:pink;
}
#child3{
    width:200px;
    background-color:green;
}