flex的四大概念：容器、项目、主轴、交叉轴
容器：如果给一个盒子设置display：flex；那么它就是一个容器。
项目：盒子中的直接子元素就是一个项目，项目默认从左向右按主轴方向排列。
对于容器的相关属性：
flex-decoration：（改变主轴的方向） row | row-reverse | column | column-reverse
flex-wrap：（如果在容器中，项目排满了一行，是否换行）nowrap | wrap | wrap-reverse
flex-flow：flex-direction flex-wrap（它是一个复合属性）
justify-content：（处理富余空间）flex-start | flex-end | center | space-between | space-around
align-items：（项目在交叉轴的摆放位置） flex-start | flex-end | center
对于项目的相关属性：
order：项目的排列顺序，数值越小，排列越靠前，默认为零
flex-grow：如果有富余空间，你可以让项目变大
flex-shrink：如果项目足够多，并且不换行，也就是说一行装不下，那么你可以缩小项目
flex-basis：项目在主轴上占据的大小
align-self：单独去设置某一个项目在交叉轴的对齐方式
