flex弹性布局

一、Flex 布局是什么？
  Flex 是 Flexible Box 的缩写，意为"弹性布局"，由 容器（父元素）和项目（子元素）组成，用来为盒状模型提供最大的灵活性。注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

二、格式：
    父元素{
        display: flex;
    }
    子元素{

    }

三、容器属性（父元素的属性）

1. flex-direction  //决定项目的排序方向（默认是横向排序）
（1）flex-direction : row         //横向排序

（2）flex-direction : column   //纵向排序

 

2. flex-wrap：决定容器内项目是否会换行 

（1）flex-wrap: nowrap   //固定不换行，当空间不足时会自己调整大小而不会挤到下一行。

（2）flex-wrap: wrap    //当行大小不足时自动换行

例如：我们设置了ul宽度为300px，ul下的每个li宽度为100px，4个就是400px，比ul的宽度大，所以会自动换行。

 <style type="text/css">
        *{ margin: 0;padding: 0;} 
       ul{
            width: 300px;
            height: