CSS3-flex布局

弹性盒子 display: flex

flex为复合属性，且必须配合父元素display:flex使用

首先要了解的概念

1、被设置display: flex的元素叫做容器
2、容器内部的元素称为项目
3、容器主轴(x轴) 默认情况下
4、容器侧轴/交叉轴(y轴) 默认情况下

以下6个属性设置在项目(子元素)上:

flex-grow: 放大比例(剩下空余区域按设置的比例填充)
根据所设置的比例分配盒子所剩余的空间

/* flex-grow例子 */
/* HTML结构
    <div class="wrapper">
        <div class="item1">1</div>
        <div class="item2">2</div>
    </div>
 */
.wrapper {
   
    display: flex;
    width: 400px