响应式布局实现的几种方法 — 弹性布局
响应式布局的实现是前端工程中一个很是大的跨越，它很是灵活的可塑造性使得同一个网站能在不一样的终端设备上展示出不一样的活力。就今天这个机会，我想与你们分享并探讨一些经常使用来实现响应式布局方法中的弹性布局。html
弹性布局是一种十分方便的，只须要依赖于CSS样式的实现响应式布局的方式，也是K最多用到的一种实现响应式的方法。尤为是如今相似于某宝、某东一类的电商web站或者手机app的页面，利用弹性布局是均可以很轻松的实现的，下面就是本K用弹性布局copy的某动的手机应用的部分页面。前端
你们能够看到，特别是在小图标排列或是频繁划区的时候，弹性布局就显得十分的便利。下面，K就带你们来回顾一下关于弹性布局（display:flex）。web
弹性布局 flex 是CSS中 display 的一个属性值，经过在父容器上添加 display:flex; 属性，即可以实现其子元素在父元素中的弹性布局，但要注意的是 display:flex; 这一条样式只会做用在添加这一属性的父容器和非隔代子容器上，换句话说，父容器上的 diaplay:flex; 属性并不会使其直系子元素中的子元素产生弹性布局。通俗来说，爹只能管获得本身的儿子、而管不到本身的孙子。若是想要在下一层中继续使用弹性布局，咱们能够在相应的子元素上再次添加 display:flex; 属性来实现。app
弹性布局在父、子元素上都有相对应的属性来规范子元素在父元素中的“弹力”。布局
在父元素上，咱们常常会用到的有关弹性布局的属性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ，这几个属性分别从 主轴的方向、是否换行、项目在主轴上的对齐方式、项目在交叉轴上的对齐方式、项目在多根轴线上的对齐方式来规范了项目在父元素中的弹性。post
在子元素上，咱们常常会用到的有关弹性布局的属性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ，这几个属性分别从 项目的排序、项目放大比例、项目缩小比例、项目占据主轴空间、单个项目在交叉轴上的对齐方式来规范了项目自身的弹性。flex
以上几种具体的属性值及做用你们能够在个人博客（http://www.cnblogs.com/wk1102/p/6622738.html）中找到，这里给你们讲一下我在当时感受到的比较疑惑的几个地方。网站
（1）主轴与交叉轴。 在弹性布局中，主轴及主轴的方向取决于 flex-direction 属性的属性值，它能够是在水平方向上，也能够是在垂直方向上，既能够是正向，也能够是反向，在这里，初次接触这一律念的朋友们要注意了，千万不要单单把“主轴”与“水平正向”划等号，虽说在CSS中规定的默认值是这样的。而交叉轴表示的就是与主轴垂直的那条轴线。url
（2）基线。在弹性布局中，还提到了“基线”这个词，基线是指字母x的下端沿。而许多属性值所谓的baseline对齐方式就是指沿一行中小写x的低端线对齐，就好像一直有那么一个模板在比对者同样。htm
（3）多交叉轴线。多交叉轴线是在flex-wrap属性设置为wrap后可能出现的一种状况，即父容器中出现了多行的排列，而每一行都有其各自的轴线。
以上就是K对于实现响应式布局中弹性布局方法使用的一些小小的总结和看法，下一次，K会继续跟你们探讨关于实现响应式布局的其余几种方法。