响应式布局之弹性布局的介绍
弹性布局是一种十分方便的,只需要依赖于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会继续跟大家探讨关于实现响应式布局的其他几种方法。
以上就是响应式布局之弹性布局的介绍的详细内容,更多请关注其它相关文章!
上一篇: 网页小游戏开发入门
推荐阅读
-
css3的@media属性实现页面响应式布局示例代码
-
css3 media 响应式布局的简单实例
-
rem布局完成响应式开发,通俗且详细的原理解析和代码实现
-
.NET Core的响应式框架,基于Ace Admin框架菜单导航,Bootstrap布局,fontAwesome图标,内嵌Iframe用EasyUI做数据绑定,动态配置列表,动态配置表单
-
移动优先的响应式布局
-
一种业界通用的响应式布局解决方法
-
前端布局分类之静态布局、流式布局、自适应布局、响应式布局、弹性布局教程
-
vue-cli中实现响应式布局的方法
-
Bootstrap4响应式布局之栅格系统
-
CCS3的过渡、变换、动画以及响应式布局、弹性布局