CSS3-弹性布局篇

1. flex弹性布局

1.1 概述

1. 布局的传统解决方案，基于盒状模型，依赖 display属性 + position属性 + float属性。它对于那些特殊布局非常不方便。

2. CSS3在布局方面做了非常大的改进，使得我们对块级元素的布局排列变得十分灵活，适应性非常强，其强大的伸缩
   性，在响应式开中可以发挥极大的作用。

3. 别名：伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局

1.2 布局原理

1. flex 是 flexible Box 的缩写，意为弹性布局，用来为盒状模型提供最大的灵活性，任何一个容器都可以
   指定为 flex 布局，不需要转换盒子类型
2. 采用了 flex布局 的元素，称为flex容器，它的子元素称为flex项目
3. 总结flex布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

1.3 注意

1. 当我们为父元素设为 flex 布局以后，子元素的float、clear、vertical-align属性将失效
2. flex布局没有外边距合并
3. flex布局，分配剩余空间分配的是内容盒，剩余空间会先减掉盒子的border、padding 再分配。所以当
   子元素均分剩余空间的时候，它们相等的是内容盒，如果有的盒子设置了边框、内边距，那它整体盒子
   就会比其它盒子大

1.4 语法

    display:flex; /*在父级盒子中申明伸缩布局*/

1.5 父元素的属性

1. 设置主轴的方向(默认水平)
    flex-direction:
    取值：
        a). row; 水平方向为主轴,从左到右排列(默认的主轴)
        b). row-reverse; 水平方向为主轴,从右到左排列 
        c). column; 垂直方向为主轴,从上到下排列
        d