php响应式布局,响应式布局之弹性布局的介绍

响应式布局的实现是前端工程中一个非常大的跨越，它非常灵活的可塑造性使得同一个网站能在不同的终端设备上展现出不同的活力。就今天这个机会，我想与大家分享并探讨一些常用来实现响应式布局方法中的弹性布局。

弹性布局是一种十分方便的，只需要依赖于CSS样式的实现响应式布局的方式，也是K最多用到的一种实现响应式的方法。尤其是现在类似于某宝、某东一类的电商web站或者手机app的页面，利用弹性布局是都可以很轻松的实现的，下面就是本K用弹性布局copy的某动的手机应用的部分页面。

大家可以看到，特别是在小图标排列或是频繁划区的时候，弹性布局就显得十分的便利。下面，K就带大家来回顾一下关于弹性布局(display:flex)。

弹性布局 flex 是CSS中 display 的一个属性值，通过在父容器上添加 display:flex; 属性，便可以实现其子元素在父元素中的弹性布局，但要注意的是 display:flex; 这一条样式只会作用在添加这一属性的父容器和非隔代子容器上，换句话说，父容器上的 diaplay:flex; 属性并不会使其直系子元素中的子元素产生弹性布局。通俗来讲，爹只能管得到自己的儿子、而管不到自己的孙子。如果想要在下一层中继续使用弹性布局，我们可以在相应的子元素上再次添加 display:flex; 属性来实现。

弹性布局在父、子元素上都有相对应的属性来规范子元素在父元素中的“弹力”。

在父元素上，我们经常会用到的有关弹性布局的属性主要有 flex-direction , flex-wrap , justify-content , align-items , align-content ，这几个属性分别从主轴的方向、是否换行、项目在主轴上的对齐方式、项目在交叉轴上的对齐方式、项目在多根轴线上的对齐方式来规范了项目在父元素中的弹性。

在子元素上，我们经常会用到的有关弹性布局的属性主要有 order , flex-grow , flex-shrink ,flex-basis , align-self ，这几个属性分别从项目的排序、项目放大比例、项目缩小比例、项目占据主轴空间、单个项目在交叉轴上的对齐方式来规范了项目自身的弹性。

以上几种具体的属性值及作用大家可以在我的博客()中找到，这里给大家讲一下我在当时感觉到的比较疑惑的几个地方。

(1)主轴与交叉轴。在弹性布局中，主轴及主轴的方向取决于 flex-direction 属性的属性值，它可以是在水平方向上，也可以是在垂直方向上，既可以是正向，也可以是反向，在这里，初次接触这一概念的朋友们要注意了，千万不要单单把“主轴”与“水平正向”划等号，虽然说在CSS中规定的默认值是这样的。而交叉轴表示的就是与主轴垂直的那条轴线。

(2)基线。在弹性布局中，还提到了“基线”这个词，基线是指字母x的下端沿。而许多属性值所谓的baseline对齐方式就是指沿一行中小写x的低端线对齐，就好像一直有那么一个模板在比对者一样。

(3)多交叉轴线。多交叉轴线是在flex-wrap属性设置为wrap后可能出现的一种情况，即父容器中出现了多行的排列，而每一行都有其各自的轴线。

以上就是K对于实现响应式布局中弹性布局方法使用的一些小小的总结和见解，下一次，K会继续跟大家探讨关于实现响应式布局的其他几种方法。

php响应式布局,响应式布局之弹性布局的介绍相关推荐

网页设计布局选择:固定,流行和弹性布局 (2010-12-14 13:07:35)
有一个问题已经困扰网页设计师们很久了:该使用固定.流动.弹性,还是混合布局呢?它们各有优缺点.最终的决定取决于网站的可用性,单用某一种布局就想达到目的,可能没那么容易.那么,既然如此令人困惑,是否有做 ...
Flutter 布局Row（水平方向布局）、Column（垂直方向布局）、Wrap（可以自动换行的布局）、Flex（弹性布局）、Stack（叠层布局）、
1.线性布局 Row 水平方向布局 Row({... //表示水平方向子组件的布局顺序(是从左往右还是从右往左),//默认为系统当前Locale环境的文本方向(如中文.英语都是从左往右,而阿拉伯语是从 ...
bootstrap中轮播图、模态框、提示框/弹出框、滚动监听、弹性布局、响应式flex、多媒体对象
轮播图: bootstrap封装了轮播图的功能,其具体如下: 类名描述 .carousel 创建一个轮播图块的容器,实质是做布局用:且此容器应该有一个di属性,其属性值提供给下面左右按钮href锚点 ...
固定布局(fixed layout)、流体布局(fluid layout)、弹性布局(elastic layout)、响应布局(responsive layout)理解和技巧归纳
关于web页面布局,首先简单了解一下固定布局(fixed layout).流体布局(fluid layout).弹性布局(elastic layout).响应布局(responsive layout) ...
Flutter: 弹性布局Flex(Expanded)、流式布局Wrap、Flow
用Android原生实现流式布局[实现例如app的很多标签]需要自定义View继承自ViewGroup,然后代码量也不小. 相关自定义View实现流式布局,请参考这位老兄的博客: https://bl ...
页面布局孰优孰劣：基于REM的EMs弹性布局——可用性的胜利
http://blog.dimpurr.com/ems-layout/ 页面布局的方式总是随着技术的更新和创意的涌现不断的更新换代.从最开始的 Fixed 固定布局,到因为宽屏设备和移动互联网的普及产 ...
Flex弹性布局介绍
常见的布局有哪些? 1.最常见布局浮动.定位 2.自适应布局百分比布局 3.响应式布局 @media媒体查询 4.弹性布局 display:flex 将对象最为弹性伸缩盒 ...
html弹性重叠,关于html5弹性布局(2)
在前面的一篇文章中,我很简单介绍了弹性布局的概念,这里我将介绍弹性布局的实例化.理解弹性布局,并不是那么简单,因为弹性布局的基础和思想,和我们传统的盒装模式不同,所以必须要深入接受这种弹性布局的思路. ...
CSS3 Flex 弹性布局用法详解
什么是Flex弹性布局 Flex是Flexible Box的简称,意为弹性布局,顾名思义,在网页布局时,他可以给我们提供更多的灵活性. 说明: 1.flex是display的一个属性值.与之相当应的还 ...
移动端基础（2）—— flex弹性布局
一.flex弹性布局 flexible-box-layout 弹性盒式模型,它能更加高效的控制元素的对齐.排列,更重要的是能够自动计算布局内元素的尺寸,无论这个元素的尺寸是固定的还是动态的. 父元素( ...

php响应式布局,响应式布局之弹性布局的介绍

php响应式布局,响应式布局之弹性布局的介绍相关推荐

最新文章

热门文章