在web布局中,我们经常使用的是display:inline-block,display:flex,这些,但其实在进行移动端设备自适应布局中,-webkit-box布局更加合适

不同的浏览器有不同的前缀,这里使用-webkit示例

Mozilla-----------------display:-moz-box

Webkit------------------display:-webkit-box

As specified-----------display:box

首先,需要了解的是具备的属性

-webkit-box-flex 在子元素上设置,属于子元素之间的比例,值为数值即可 默认值:1(数值,按比例分配)
-webkit-box-orient 在父元素设置,子元素的排列方式 vertical(垂直)/horizontal(水平)/inline-axis(默认值,横向排列,映射为 horizontal)/block-axis(沿着块轴来排列子元素,映射为 vertical)/inherit(从父元素继承 box-orient 属性的值)
-webkit-box-align 在父元素设置,子元素垂直方向的对齐方式

start(对于正常方向的框,每个子元素的上边缘沿着框的顶边放置。对于反方向的框,每个子元素的下边缘沿着框的底边放置。)/end(对于正常方向的框,每个子元素的下边缘沿着框的底边放置。对于反方向的框,每个子元素的上边缘沿着框的顶边放置。)/center(均等地分割多余的空间,一半位于子元素之上,另一半位于子元素之下)/baseline(如果 box-orient 是inline-axis或horizontal,所有子元素均与其基线对齐)/stretch(默认值,拉伸子元素以填充包含块)

-webkit-box-direction 在父元素上设置,排列顺序 normal(默认,以默认方向显示子元素)/reverse(以反方向显示子元素。)/inherit(从子元素继承 box-direction 属性的值)
-webkit-box-flex-group 在子元素上设置,以组为单位的流体系数  默认值:1
-webkit-box-ordinal-group 在子元素上设置,以组为单位的排列方向   默认值:1
-webkit-box-pack 在父元素上设置,子元素水平方向的对齐方式

center(均等地分割多余空间,其中一半空间被置于首个子元素前,另一半被置于最后一个子元素后)

/justify(在每个子元素之间分割多余的空间(首个子元素前和最后一个子元素后没有多余的空间))

/start[对于正常方向的框,首个子元素的左边缘被放在左侧(最后的子元素后是所有剩余的空间)对于相反方向的框,最后子元素的右边缘被放在右侧(首个子元素前是所有剩余的空间)]

/end[对于正常方向的框,最后子元素的右边缘被放在右侧(首个子元素前是所有剩余的空间)。对于相反方向的框,首个子元素的左边缘被放在左侧(最后子元素后是所有剩余的空间)。]

-webkit-box-lines 子元素是否换行,类似word-wrap和word-break  single(将被放置在单个行或列的所有子元素(元素不适合只会被认为是溢出))/multiple(box允许扩大到多行,以适应其所有子项)

eg:-webkit-box-flex案例:

效果图:

当我们把2的比例系数改为2时:

效果图:会重新分配:

自适应布局display:-webkit-box的用法的更多相关文章

  1. 自适应布局webkit-box的用法

    Flexible Box Model(灵活盒子模型)在平常的web横排布局中,会经常用到float或display:inline-block,但是在多种不同宽度的移动设备的自适应布局中用的话,还得设置 ...

  2. display:table-cell自适应布局下连续单词字符换行——张鑫旭

    之前有几次提到了使用display:table-cell实现强大的任意尺寸元素的自适应布局(都藏在长长文章之中).这里开篇再次提一下,希望能将该技术普及下去. 典型的双栏布局类名使用如下: fix l ...

  3. 前端CSS3布局display:grid用法

    前端CSS3布局display:flex用法 1. 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta char ...

  4. 前端CSS3布局display:flex用法

    前端CSS3布局display:flex用法 先附上代码 点击查看代码 <!DOCTYPE html> <html> <head> <meta charset ...

  5. css3中的display:-webkit-box的用法

    一. css weui-media-box__desc { color: #999999; font-size: 13px; line-height: 1.2; overflow: hidden; t ...

  6. 这可能是史上最全的CSS自适应布局总结教程

    标题严格遵守了新广告法,你再不爽,我也没犯法呀!话不多说,直入正题. 所谓布局,其实包含两个含义:尺寸与定位.也就是说,所有与尺寸和定位相关的属性,都可以用来布局. 大体上,布局中会用到的有:尺寸相关 ...

  7. 常见css垂直自适应布局(css解决方法)

    css3的盒模型, css3中添加弹性盒模型,最新弹性盒模型是flex,之前为box <!DOCTYPE html> <html > <head> <titl ...

  8. 常见css水平自适应布局

    左右布局,左边固定,右边自适应布局 BFC方法解决 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  9. 【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

    这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinx ...

随机推荐

  1. java实现截取PDF指定页并进行图片格式转换

    1.引入依赖 <dependency> <groupId>org.apache.pdfbox</groupId> <artifactId>pdfbox& ...

  2. HZNU Training 2 for Zhejiang Provincial Collegiate Programming Contest 2019

    赛后总结: T:今天下午参加了答辩比赛,没有给予队友很大的帮助.远程做题的时候发现队友在H上遇到了挫折,然后我就和她们说我看H吧,她们就开始做了另外两道题.今天一人一道题.最后我们在研究一道dp的时候 ...

  3. Redis与Queue

    Redis有多种数据结构,适合多种不同的应用场景 1. 使用Redis做缓存 Redis的字符串.哈希表两种数据结构适合用来储存大量的键值对信息,从而实现高速缓存. 2. 使用Redis做队列 Red ...

  4. unicode编码原理及问题

    历史在1963年,计算机的使用尚不广泛,那时使用的是7-bit的ASCII码,范围为0-127作为字符的编码,只支持少部分的字符,但是随着计算机的普及,不同的国家地区开始自己制造自己的编码规范,这导致 ...

  5. 使用 jupyter-notebook + python + matplotlib 进行数据可视化

    上次用 python 脚本中定期查询数据库,监视订单变化,将时间与处理完成订单的数量进行输入写入日志,虽然省掉了人为定时查看数据库并记录的操作,但是数据不进行分析只是数据,要让数据活起来! 为了方便看 ...

  6. 网络编程之TCP/IP各层详解

    网络编程之TCP/IP各层详解 我们将应用层,表示层,会话层并作应用层,从TCP/IP五层协议的角度来阐述每层的由来与功能,搞清楚了每层的主要协议,就理解了整个物联网通信的原理. 首先,用户感知到的只 ...

  7. Spring错误

    今天在学习spring的aop操作时碰到了一个问题: Caused by: org.springframework.aop.framework.AopConfigException: Cannot p ...

  8. Android 图片处理之 Fresco

    一.关于 Fresco github: https://github.com/facebook/fresco API: http://www.fresco-cn.org/javadoc/referen ...

  9. .Net基础篇_学习笔记_第六天_类型转换和方法(函数)简介

    类型转换:Convert.ToInt32();  int.Parse();  int.TryParse(); Convert.ToInt32(); 的本质就是在使用 int.Parse(); int. ...

  10. Spring SpringMVC myBatis(简称SSM)理解

    1对Spring的理解 (1)spring是什么? spring是Java SE(Java 标准版本)/Java EE(Java 企业版本)开发应用框架. (2)spring的作用 (a)spring ...