伸缩盒模型flexbox

伸缩（弹性）盒模型flexbox:决定一个盒子在其他盒子中的分布以及如何处理可用的空间，使用该

模型可以创建“自适应”浏览器窗口的流动布局，可以规定特定的顺序，开启只需要设置display属

性值为flex目的是在浏览器窗口变化时，盒子相应的改变大小。设置了弹性盒模型后，float、clear

、vertical-align在flex中不起作用

实际上就是页面布局会随着你拉动浏览器边框时进行缩放

1、flexbox的基础知识：由于flexbox是一个整体的模块，有一些属性在父容器上设置，有一些在

子容器上设置

（1）flexbox的基本结构

<1>在html的部分中首先要规定一个父容器（父元素），然后父容器里面包含多个子元素（项目）

   <div class="box">    父容器

        <div class="item1"></div>    父容器里面的子元素叫做“项目”

        <div class="item2"></div>

        <div class="item3"></div>

   </div>

<2>其次可以在css部分规定父容器中要怎么显示里面的项目，如是否换行、项目排列方向等

     .box{display:flex}     最外层为父容器，定义此容器为弹性布局

     .item1{flex-grow:1;}   表示该项目占的比例（flex-grow属性定义的是比例，即使没有

                            写div的宽度也会进行划分）

     .item2{flex-grow:2;}

     .item3{flex-grow:3;}

（2）常用属性

<1>父容器中常用的属性

   display:flex;    定义一个flex容器

<2>项目中常用的属性（伸缩盒中每一个元素称为项目）

①flex-grow:数字;    定义项目的比例

（P.S.设置边距<也就是说中间的空隙>用margin、margin-left、margin-right）

  flex-grow只是设置了比例，不用你再定义width，但是如果要实现字距问题还是要加margin的

  图文的上下间距可用padding-top（只控制文字），不能用margin-top（因为用margin-top的话

  图片也会一起变化）