响应式布局简介

弹性布局
浮动+百分比布局

父级盒子{width: 100%; border: 1px solid #000000; padding: 10px; }
子盒子A{width: 30%; float: left; background: red; padding: 10px; }
子盒子B{ width: 65%; float: left; margin-left: 10px; background: yellow; }

Flex布局
Flex布局是在CSS3中引入的，被叫做“弹性盒模型”
该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间
Flex布局功能
在屏幕和浏览器窗口大小发生改变时，可以灵活的调整布局
控制元素在页面的布局方向
按照不同于DOM所指定排序方式对屏幕上的元素重新排序
Flex布局的优势
可以让盒子里面的元素排在一行
盒子里面的元素是高度相同
父级盒子 { display: flex; border: 1px solid #000000; }
子盒子A{ background: red; padding: 10px; }
子盒子B{ margin-left: 10px; background: yellow; }
Flex属性
flex：伸缩性
flex-direction：伸缩流方向
flex-wrap：伸缩换行
justify-content：主轴对齐
align-items：侧轴对齐

父级盒子 {display: flex; border: 1px solid #000000; padding: 10px; }
子盒子A{ flex:1;background: red; padding: 10px; }
子盒子B { flex:1; margin-left: 10px; background: yellow; }