felx，felx，flex

flex-direction

决定主轴的方向
flex-direction: row
row-reverse
column
column-reverse;

当主轴为x轴时justify-content（在主轴上的排列规则 ）

抓思低fai、 ； 康ten、t

flex-direction: row;
justify-content: space-around;

space：思背思

每个盒子两边的距离一样，中间就看起来宽一点

flex-direction: row;
justify-content: space-evenly;

evenly：伊文嘞

每个盒子之间的间距是一样的

flex-direction: row;
justify-content: space-between;

当主轴为y轴时justify-content（在主轴上的排列规则 ）

column：康 len、

flex-direction: column;
justify-content: space-between;

flex-direction: column;
justify-content: space-evenly;

flex-direction: column;
justify-content: space-around;

当主轴为x轴时align-items（相对于另一个轴的排列位置 ）

align-items: center

当主轴为y轴时align-items（相对于另一个轴的排列位置 ）

flex-direction: column;
align-items: center;

flex-direction: column;
align-items:flex-end;

flex-direction: column;
align-items:flex-start;

flex-wrap

单行还是多行
nowrap(默认)：单行
wrap：多行

flex：1（剩余空间的分配比例）

会无视宽度或者高度

align-content（适用多行）在另一个轴的排列方式

align-content在x轴

flex-wrap:wrap;
align-content:center;

flex-wrap:wrap;
align-content: space-between;

flex-wrap:wrap;
align-content: space-around;

flex-wrap:wrap;
align-content:space-evenly;

align-content在y轴

flex-direction: column;
flex-wrap:wrap;
align-content:center;

flex-direction: column;
flex-wrap:wrap;
align-content:space-around;

flex-direction: column;
flex-wrap:wrap;
align-content:space-between;

flex-direction: column;
flex-wrap:wrap;
align-content:space-evenly