弹性布局

• display:flex;
  • justify-content:space-between; — 水平分布【item之间有相同的边距，和容器之间没边距】
  • justify-content: space-around; — item和item之间以及和容器之间都有边距
  • align-items: center; — 垂直居中分布
  • align-items:stretch; — 如果item没有设置高度,将item在交叉轴上进行拉伸
  • flex-direction: column; — 列
  • flex-direction:row; — 行
  • flex-direction: column-reverse;— 垂直方向反向
  • flex-direction: row-reverse;— 水平方向反向
  • flex-wrap: wrap-reverse; —反向换行
  • flex-wrap: wrap; —换行
  • flex-wrap: nowrap; —不换行
  • order: 1; — 调整顺序

要想使用弹性布局

1. 必须给容器设置display:flex;
2. 容器设置dispaly:flex;之后，item的浮动和display效果就失去作用了【子元素不需要在设置浮动】
3. 默认情况下，内容item会全部分布在主轴方向的一行上,如果放置不下内容item会自动缩小
4. flex-direction 设置当前主轴的方向 row（行） row-reverse(水平方向的反向) column（列） column-reverse（垂直方向的反向）
5. flex-wrap 设置当前item换行的方式 nowrap wrap wrap-reverse
6. flex-flow flex-direction和flex-wrap 的集合写法
7. justify-content item在主轴上的对齐方式 flex-start（起点）flex-end（终点）center（整体居中）space-between（水平分布【item之间有相同的边距，和容器之间没边距】）space-around（item和item之间以及和容器之间都有边距）
8. align-items 调整的是一条轴线上的元素在交叉轴上的对齐方式 flex-start（交叉轴的起点）flex-end（交叉轴的终点）center（交叉轴上居中）如果item没有设置高度，stretch将item在交叉轴上进行拉伸
9. align-content 设置多条轴线在交叉轴上的分布方式
10. order 给每个item一个编号，用来调整顺序
11. flex-grow 如果主轴存在剩余的空隙，值代表当前item要占据剩余空间的比例
12. flex-shrink 在不换行的情况下，如果主轴的空间不足，值代表每个item缩小的比例
13. flex-basis 表示item咋主轴上面要占据的基本宽度【设置在主轴方向上的宽度值】
14. flex flex-grow + flex-shrink + flex-basis的集合写法
15. align-self 单独调整当前item在交叉轴上的对齐方式

响应式布局

媒体查询screen 电脑 手机 平板查询条件 and（包括）or（或者）not（排除）1.当分辨率大于1900px时,width变为1800px@media screen and (min-width: 1900px){.container{width:1800px;}}2.当分辨率小于1280时起作用@media screen and (max-width: 1280px){.container{width:800px;}}

元素居中问题

父元素宽高已知

第一种方法：margin: 0 auto;第二种方法  position: absolute;left:200px;top:200px;

父元素宽高未知

第一种方法：position: absolute;left:50%;top:50%;margin-left: -50px;margin-top: -50px;第二种方法：position: absolute;left:calc(50% - 50px);top:calc(50% - 50px);第三种方法：position: absolute;left:50%;top:50%;transform: translate(-50px,-50px);第四种方法：position: absolute;left:50%;top:50%;bottom：50%；right:50%;margin:auto;

父元素子元素宽高未知

第一种方法：给父元素设置弹性布局，子元素内容撑开display: flex;justify-content: center;align-items: center;

设置侧边栏效果

1.左边元素脱离文档流（设置浮动）.left{float:left;}.right{width:auto;margin-left:150px;}
2.定位.left{position: absolute;left: 0;top:0;}.right{width:auto;margin-left:150px;}
3.弹性布局.box{display: flex;}.right{width: auto;flex-grow: 1;}