关于flex布局的常用总结
-
position: relative; 相对定位 ，相对定位是以盒子原来所在的位置为参考点。
-
position: absolute; 绝对定位 ，以父级元素作为参考点，需要父级元素设置 position:"relative",此时在父级元素中position："relative"不再是相对定位
-
position: fixed; 固定定位:用来将内容固定在网页中的某一位置 注意：三个定位都需要配合left、right、投票、bottom，进行设置具体数值的添加
-
flex-flow: column wrap; flex-flow表示flex-divrection和flex-wrap的缩写
-
flex-wrap: wrap; 表示换行
-
flex-wrap: nowrap; 表示不换行
-
flex-wrap: wrap-reverse; 将项目的排列方式对调，就是将原本在上面水平排列变成在下面水平排列
-
flex-direction: row-reverse; 将主轴方向从右往左排列
-
flex-direction: row; 是默认值，默认将主轴从左往右排列
-
flex-direction: column; 表示主轴垂直向下排列
-
flex-direction: column-reverse; 表示主轴垂直向上排列
-
justify-content: flex-start; 表示项目在主轴的起点开始排列
-
justify-content: flex-end; 表示项目在主轴的终点开始排列
-
justify-content: center; 表示项目在主轴的中点开始排列
-
justify-content: space-between; 表示富裕空间在项目与项目之间
-
justify-content: space-around; 表示富于空间均匀的环绕在项目之间
-
justify-content: space-evenly; 表示将富于空间均匀的分给每个项目
-
align-items: flex-start; 表示项目在交叉轴的起点开始排列
-
align-items: flex-end; 表示项目在交叉轴的终点开始排列
-
align-items: center; 表示项目在交叉轴的中点排列
-
align-items: stretch; 如果项目没有设置高度就会铺满整个交
-
align-items: baseline; 表示项目的基线对齐
-
align-content: flex-start; 表示多根主轴在交叉轴的起点开始排列
-
align-content: flex-end; 表示多根主轴在交叉轴的终点开始排列
-
align-content: center; 表示多根主轴在交叉轴的中点开始排列
-
align-content: space-between; 表示把交叉轴上的富于空间放在两排间
-
align-content: space-around; 表示吧交叉轴上的富于空间环绕在两排间
-
项目属性orio可以改变项目在主轴的交的排列顺序，给每个* 项目附加ordio值，数排列越靠前。
-
align-self: 可以单独设置某个项目轴上的对齐方式。
-
flex: 1;表示将富于空间均匀的分给目。
浮动
-
float：left：左浮动
-
float：right：右浮动
浮动对父级元素造成影响
如果父级元素没有设置宽，就会造成父级元素的塌陷，也就是父级元素的宽会变成0
-
清除浮动的方法
1：加高法：就是手动给浮动元素的父级元素增加一个高度
2：内墙法：内墙法就是在浮动元素后面再加一个元素，此元素需要添加特定属性sty="clear:both"。不常用
3：overflow:hidden;:通过手动触发BFC进行清除浮动对父级元素的影响
4：为元素：就是通过内墙法的改良版，通过css样式进行添加一个伪元素。
5：封装元素：封装元素就是通过规定css样式，设置一个伪类的css的属性名，哪个元素受影响，就给哪个元素添加类名
浮动对兄弟元素的影响
-
浮动元素会对兄弟元素造成影响，当元素浮动之后同级元素会跑到浮动元素的下面
-
清楚兄弟元素浮动的影响
1：clear：both：清除作于浮动的影响
