关于flex的笔记篇关于学习flex的文章，图片用的阮一峰老师的图，嘻嘻 1、order 定义排序顺序 2、flex

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

一篇关于学习flex的文章，图片用的阮一峰老师的图，嘻嘻

1、order 定义排序顺序

.box{
    display: flex;
    order: 1; // 值越小越靠前
}

.box{
    display: flex;
    flex-grow: 0; // 默认值 当前元素在容器中的占比，默认不放大
}

如果所有项目的flex-row值都为1，将等分所有空间，

如果某个项目的值为2，宽度则是其他项目的两倍。

默认值为0，则有剩余空间也不放大项目

.box{
    display: flex;
    flex-shrink: 1;
}

如果所有项目值都是1，剩余空间不足时所有项目等比缩小。

如果某项目值为0，剩余空间不足时其他项目缩小。

负值无效

.box{
    displah: flex;
    flex-basis: auto
}

记录在再分配剩余空间前，该项目的空间占比，默认值为auto即其自身原本的空间占比。

当值为固定值(如200px)的时候，将占据固定空间

.box{
    display: flex;
    /* 默认值(0 1 auto),后两个属性可选 */
    flex: <flex-grow> <flex-shrink> || <flex-basis>;
}

快捷值 auto(1 1 auto) none(0 0 auto)

auto: 表现形式为，所有项目平均分配所有空间

none：表现形式为，所有项目按照自身大小显示，不会因为有剩余空间而改变自身占比

建议优先使用快捷值，而不是三个分离的值，因为浏览器会推算相关值

默认值为auto，继承对齐方式，没有父级元素，则为stretch；

.box > .item{
    align-self: auto(normal) | flex-start | flex-end | center | baseline | stretch;
}

除了auto，其他值表现形式等同于align-items