随着互联网时代的发展，我们对网页布局有了新的要求，大气，美观，能够在不同的设备上呈现令人焕然一新的效果。此时，一个全新的概念响应式布局应运而生！它的诞生为我们的移动端布局带来了很大的便利，因此学习响应式页面布局势在必行！
响应式布局是Ethan Marcotte在2010年5月份提出的一个概念，简而言之，就是一个网站能够兼容多个终端而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览器而诞生的。
响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验，而且随着目前大屏幕移动设备的普及，用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术，我们不仅看到很多的创新，还看到了一些成形的模式。
2.设置了display:flex属性的元素，称为Flex容器，他里面的所有子元素统称为容器成员，称为Flex项目。后面我们就使用Flex容器和 Flex项目来进行介绍。 Flex容器有两根坐标轴：主轴（main axis）和交叉轴（cross axis）。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
可以在不改变页面内容的情况下，为特定的一些输出设备定制显示效果，是响应式布局实现的主要方式。
1） 导航部分由logo，导航和登录三部分组成，这三部分放置在一个header的父容器中，给header设置display：flex；使之成为弹性盒模型，并设置主轴方向为row，子元素在父容器中的对齐方式为两端对齐。
1） 所有的图片都放置在一个class名为picture的父容器中，给父容器添加display:flex；使之成为弹性盒模型，并设置子元素的对齐方式为居中对齐（justify-content:center;）,并设置每一个子元素占据父元素的25%，溢出换行显示。
