HBuilderX flex布局

传统布局：盒子模型+display+float+position

换行：flex-wrap:wrap;

flex布局：flexible box,弹性布局

item：项目

main：主轴

cross:交叉轴

stayt：开始

end：结束

main axis：水平的主轴

cross axis：垂直的交叉轴

main start：主轴的开始位置

main end：主轴的位置结束

cross start：交叉轴的开始位置

main start：交叉轴的结束位置

·项目默认沿主轴排列

·单个项目占据的主轴空间叫main size

`单个项目占据的交叉轴空间cross size

 display:flex;设置父盒子为flex容器

flex-direction:决定主轴的方向

row:默认以行为主轴（从左往右）

row-reverse:行反转（从右往左）

column：以列为主轴（从上往下）

coulumn-reverse:列反转（从下往上） 

主轴方向的排序：justify-content:flex-end;

(justify-content:主轴方向的排序、flex-start:主轴的开始位置、默认值）

flex-start:主轴的开始位置、默认值

flex-end:主轴的结束位置

center:居中

space-betweent:两端对齐

space-around:环绕对齐、拉手对齐

交叉轴的对齐方式:align-items;

flex-start:交叉轴的开始位置对齐；

flex-end：交叉轴的结束位置对齐；

center：交叉轴居中对齐；