Flex布局总结

flex布局拥有主轴和侧轴

主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向（x轴正向）

测轴：与主轴垂直的轴称作侧轴，默认是垂直方向的（y轴负向）

方向：默认主轴从左向右，侧轴默认从上到下

主轴和侧轴不是固定不变的,可以使用flex-direction设置主轴的方向

1.父项常见属性

flex-direction决定了主轴的方向;

row是默认值，从左到右;

row-reverse是从右到左;

colum是从上到下;

colum-reverse是从下到上;

2.justify-content

justify-content:设置主轴上的对其方式

主轴方向根据flex-direction的值设置,默认为横轴

center为居中对齐

space-around:项目之间距离相等

space-evenly:间隙相等

space-between:两端对齐

3.align-items:设置项目在交叉轴上的对齐方式

默认是x轴时,交叉轴为纵轴:如果设置主轴是y轴,那么交叉轴就是x轴