flex 总表

什么是flex？

flex的基本属性

.flex{
   display:flex;
}

1. 在flex的最基本属性中，就是给元素的父组件，设置display:flex; , 之后元素会并排;

2. 可以通过flex-direction: column;将元素设置成竖排 , 同时该属性还有另外三个参数row(横向的默认参数) , row-reverse横向的逆转(最后一个元素在第一位) , row-column纵向的逆转(最下面的元素在最上面);

3. 可以通过给子元素设置flex-basis来控制子元素的大小,可以是百分比和具体的像素数值,如果设置一个flex-basis: 50px;效果如下图:
   

   每个元素的宽度都是50

4. 那么如果希望元素把父级的空格都占满的话最简单的方式就是给子元素设置一个flex-grow: 1;效果如下图:
   

   每个元素分到的宽度都是均等的

5. 那么如果希望第一个宽度多一点,可以给该子元素设置多一些的flex-grow;

 /* 给第一个box1设置样式,这样第一个元素分到的多余的宽度是其他元素分到的6倍 */
        .box1:nth-child(1){
          flex-grow: 6;
        }

第一个元素分到的多余的宽度是其他元素分到的6倍