flex总结

1、默认情况下 行内元素 span 加宽度和高度无效

2、给父盒子设置的flex布局

​ ①子元素 子项 直接加宽度和高度

​ ②子元素存在默认的宽度和高度

​ Ⅰ 宽度 等于内容撑开

​ Ⅱ高度 等于父项的高

​ Ⅲ子元素

​ ①使用浮动无效

​ ②使用 定位 margin 变换 有效

3、父项

1、 设置主轴的方向 水平

​ flex-direction：

​ ①row：默认值，行 水平方向 从左到右 少用

​ ②row-reverse：行 水平方向 从右到左 少用

​ ③column： 列 从上到下 常用

​ ④column-reverse：列 从下到上 少用

2、设置主轴对齐方式 水平

​ justify-content:

​ ①flex-start

​ ②flex-end

​ ③center

​ ④space-between

​ ⑤space-around

​ ⑥space-evenly

3、设置换行

​ ①flex 默认不会换行：flex-wrap：nowrap;

​ ②换行：flex-wrap：wrap;

4、设置侧轴对齐方式-单行 垂直

​ align-items：

​ ①flex-start;

​ ②flex-end;

​ ③center;

5、设置侧轴对齐方式-单行 垂直

​ align-center:

​ ①flex-start;

​ ②flex-end;

​ ③center;

​ ④space-evenly;

​ ⑤space-beween;

​ ⑥space-around;

子项

1、设置子项在侧轴的对齐方式

​ flex:1;

2、设置子项在侧轴的对齐方式

​ align-self:

​ ①flex-start;

​ ②flex-end;

​ ③center;

长度单位（初步了解）

vw、vh

作用：屏幕适配使用适配

相对长度单位 100vw = 屏幕的宽度