Flex box弹性布局 及 响应式前端设计的优化

Flex box弹性布局

    Flex box是CSS3新添加的一种模型属性，它的出现有力的打破了咱们经常使用的浮动布局、实现垂直等高、水平均分、按比例划分，能够实现许多咱们以前作不到的自适应布局。若是你但愿网站能以webapp的外观呈如今手机用户面前，那么，Flex box就是个不错的方式。Flex box和APP的结构很相似，头部底部所有固定，而中间部分的高度实现自适应。

应用于父元素上：

一、display:flex/inline-flex

二、flex-wrap:nowrap/wrap/column/column-reverse  是否换行

三、flex-direction:row/row-reverse/column/column-reverse  横着仍是竖着显示

四、flex-flow:flex-direction|flex-wrap 复合元素

五、justify-comtent:flex-start/flex-end/center/space-between/space-around 水平方向对齐方式

六、align-items:flex-start/flex-end/center/baseline/stretch 纵轴对齐方式

七、align-content:flex-start/flex-end/center/space-between/space-around/stretch   在换行状况下，纵轴对齐方式

应用于子元素上

一、order：<integer>用数据值来定义排列顺序，数值越小的排在前面（能够为负值）

二、flex-grow：<number>(default 0)设置uo检索弹性盒的扩展比率（不容许负值）

三、flex-shrink：<number>(default 1)收缩比例（超出最大范围）

四、flex-basis:<length>|auto(default auto)(不容许负值)

　　　　　　　　<percentage>用百分比来定义宽度（不容许负值）

五、flex：none|flex-grow||flex-shrink||flex-basis 复合属性

六、align-self:auto|flex-start|flex-end|center|baseline|stretch  检索自身在侧纵轴方向上的对齐方式

注意注意：在设置弹性盒子的时候css不起做用的属性：

一、float、clear、vertial-align

优化  响应式前端设计的优化。主要针对用户体验的改进。

  (1)减轻Javascript库负载

       对于移动端来讲，jQuery表现的太过厚重，而如今针对移动端的状态来讲，有jQuery Mobile、YUI、XUI等可供选择的框架。

  （2）减小HTTP请求次数

  移动端相比较PC端有一个特殊的限制须要考虑到，就是用户的网络流量是有限的。这时候针对这些页面内部的部分操做，能够使用Ajax异步请求来完成，针对短时间内不会变化的一些数据，能够使用服务器端缓存、前端缓存等机制来保存这些数据，这样能够减小用户必定的数据请求量。

  （3）Javascript和CSS须要尽可能压缩

  把页面中使用的Javascript和CSS进行压缩以后会有效地减小页面大小。

  （4）用CDN管理页面资源

  CDN的即内容分发网络，意在尽量避开互联网上有可能影响数据传输速度和稳定性的环节，使内容传输的更稳定。

  （5）列表图片实现“懒”加载

  移动终端设备由于屏幕大小有限，没有必要将全屏中的图片一次性加载完成，网页加载的同时，咱们能够选择逐个加载，当用户进行滑动页面的时候，再继续加载图片。

 （6）图片显示的优化处理

  根据用户设备的分辨率来加载不一样分辨率下的不一样图片，这样既能给不一样终端的用户一个很好的视觉体验，又不会白白浪费用户的网络数据流量。