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倍
6.那么有没有一些简写的方法呢 , 显然是有的 , 经常使用到的给子元素设置的flex:1 , 该属性的意思是将多余的部分均分给每个元素 , 值得注意的是,这里的均分并不是指每个元素的宽度 , 而是对多余的部分进行均分的操作 , 如果需要每个元素的宽度相等需要设置flex:1 0px;