flex布局

flex布局

1.让一个元素变成flex容器：
.container{
display: flex;/* inline-flex */
flex-direction:row;(默认值是row，元素一字排开，column是竖着排，row-reverse是从右往左，column-reverse是从下往上)
flex-wrap:wrap;(位置不够的时候换行，nowrap是不换行，这是一个人默认的值，一般用换行)
justify-content:flex-start;(默认是尽量往左靠，flex-end是尽量往右靠，center是居中，space-between是把多余的空间放到每个元素的缝隙中，space-around是把空间给每个盒子的左右两边分开，第一个和最后一个也有，中间是二倍space-evenly是每个元素左右两边的距离一样大)
}
如果在文档流的话，从左到右位置不够的时候会自动换行，但是flex不会，它会挤一挤，每个元素的宽度一样，但不是原来设的宽度，

上面的都是主轴对齐，下面是次轴对齐
如果每个元素高度不同时，会参考最高元素的中间，剩下的对齐，使用
align-items:center;(也存在flex-end,flex-start,stretch,baseline)

2. .container item的样式

1. order可以给它一个整数值，在显示上会从小到大排列，可以使负值

2. flex-grow:1；（控制长胖）
   是能有多宽有多宽(将多余的空间分配开)，它也可以是其他的值，如果两个元素中，一个是1，一个是2，那么多余的空间按1:2分配，如果其他的item都不写，只给一个写了flex-grow:1，那就把所有的剩余空间都给这个元素

3. flex-shrink:1；（控制变瘦）
   在空间不够时，这个元素缩小，值越大缩的越快，如果是0时，就是永远不会变瘦，默认值是1，要瘦大家一起瘦，用于在空间不够时让谁缩小

4. flex-basis:控制基准宽度
   默认是auto，不常用

5. align-self:flex-end（flex-start）;
   可以让某一个元素跑到下面