| 属性名 | 属性值 |
| flex-direaction（排列方向） | row（默认）：主轴为水平方向，起点在左边（➡） row-reverse：主轴为水平方向，起点在右边（⬅） column：主轴为垂直方向，起点在上 column-reverse：主轴为垂直方向，起点在下 |
| flex-wrap（一排放不下，是否换行） | nowrap（默认）：不换行 wrap：换行，第一行在上面 wrap-reverse：换行，第一行在下面 |
| flex-flow（排列-换行集合） | <flex-direaction><flex-wrap>缩写 row nowrap：水平，不换行 |
| justify-content（主轴对齐方式） | flex-start（默认）：左对齐 flex-end：右对齐 center：居中 space-bettween：两端对齐，中间间隔相等 space-around：每个间隔都相等 |
| align-items（交叉轴对齐方式） align-self（单个对齐方式） | flex-start：交叉轴起点对齐（上方对齐） flex-end：交叉轴终点对齐（下方对齐） center：交叉轴中点对齐（中点对齐） baseline：项目第一行文字基线对齐 stretch（默认）：未设置高度或者设置auto时，占满整个容器 |
| align-content（多轴线对齐方式） | flex-start：与交叉轴起点对齐 flex-end：与交叉轴终点对齐 center：与交叉轴中点对齐 space-bettween：与交叉轴两端对齐 space-around：轴线两侧间隔对齐 stretch（默认）：轴线占满整个交叉轴 |
flex缩写
flex：none | [ <flex-grow> <flex-shink> || <flex-basis>]
flex-grow：当有剩余空间时，是否可以放大
flex-shink：当无剩余空间时，是否可以缩小
flex-basis：平分剩余空余空间之前，项目在主轴上占据的空间大小位置
| flex属性值 | 等同于 | flex-grow（默认0） | flex-shink（默认1） | flex-basis |
| flex: auto | flex: 1 1 auto | 1（可放大） | 1（可缩小） | auto（本身项目大小） |
| flex: 1 | flex: 1 1 0 | 1（可放大） | 1（可缩小） | 0%（元素宽度可为0） |
| flex: none | flex: 0 0 auto | 0（不放大） | 0（不缩小） | auto（本身项目大小） |
| flex: 0 | flex: 0 1 0 | 0（不放大） | 1（可缩小） | 0%（元素宽度可为0） |
| flex: initial(默认) | flex: 0 1 auto | 0（不放大） | 1（可缩小） | auto（本身项目大小） |