CSS基础复习总结（三）——flex布局、浮动与定位的区别

**

1.flex布局

**
父盒子(flex 容器)：
display:flex; // 指定为 flex 布局
justify-content ： flex-start(默认)、flex-end、center、space-around（先贴边后平分）、space-between（平分剩余空间） //子元素的主轴排列方式
space-around; // 设置子元素在主轴上的对齐方式
flex-direction:row(默认)|row-reverse|column|column-reverse; // 设置主轴方向
flex-wrap:nowrap(默认)|wrap|wrap-reverse; // 设置是否允许子元素换行
align-items: flex-start、flex-end、center、stretch(拉伸、默认)//单行子元素的侧轴排列方式
align-content: 新增：space-around（先贴边后平分）、space-between（平分剩余空间）//多行子元素的侧轴排列方式，必须先设置允许换行才可以生效。
子盒子(容器的子元素)：
只把比较常用的写出来把 flex：1；//代表子元素分得几份父亲的资源。
**

2.浮动与定位的区别

**
1.关于浮动：默认为 none,对应标准流的情况。当 float : left;时，元素就会向其父元素的左侧靠紧，脱离标准流，同时宽度不再伸展至充满父容器，而是根据自身内容来确定。
2.关于定位：position 取值有 static absolute relative fixed；
static 是默认的,即标准流排下来,就是 static 定位方式
fixed 相对于浏览器窗口定位的，这个会脱离标准流，一般[回到顶部]这种按钮就是fixed 做的
relative 照自己原有的文档流位置定位，不会脱离原有的文档流
absolute 就是相对于父元素的非默认定位元素位置定位，这个会脱离标准流