flex弹性布局，为盒状模型提供最大的灵活性

一、容器的属性

• flex-direction,决定主轴的方向。row|row-reverse|column|column-reverse

• flex-wrap,决定换行方式。nowrap|wrap|wrap-reverse

• flex-flow，是flex-direction属性和flex-wrap属性的简写形式，默认值是row nowrap
• justify-content，决定主轴上的对齐方式 flex-start|flex-end|center|space-between|space-around
• align-items,定义项目在交叉轴上如何对齐 flex-start|flex-end|center|stretch
• align-content, 定义多根轴线的对齐方法 flex-start

二、项目的属性

• order ,定义项目的排列顺序，数值越小，排列越靠前
• flex-grow ，定义项目的放大比例，默认为0，如果存在剩余空间，也不放大
• flex-shrink ，定义项目的缩小比例，默认为1，如果空间不足，该项目将缩小
• flex-basis， 定义项目的多余空间
• flex，是flex-grow,flex-shrink和flex-basis的简写，默认值是0 1 auto
• align-self，