自适应布局webkit-box,在平常的web横排布局中,会经常用到float或display:inline-block,但是在多种不同宽度的移动设备的自适应布局中用的话,还得设置百分比宽度和考虑清除浮动。而Flexible Box Model可以自动计算宽度和自适应,更加方便。

-webkit-box-orient子元素排列方向 horizontal | vertical | inline-axis | block-axis | inherit,其中默认值是inline-axis,即横向排列

-webkit-box-flex 子元素之间比例,仅作一个系数

-webkit-box-direction 子元素排列顺序 normal | reverse | inherit,其中默认值是normal

-webkit-box-flex-group 以组为单位的流体系数

-webkit-box-ordinal-group 以组为单位的子元素排列方向

-webkit-box-lines 子元素是否换行,类似word-wrap和word-break的作用

-webkit-box-align 子元素垂直方向的对其方式

-webkit-box-pack 子元素水平方向的对其方式

CSS之自适应布局webkit-box的更多相关文章

  1. CSS流体(自适应)布局下宽度分离原则

    CSS流体(自适应)布局下宽度分离原则 这篇文章发布于 2011年02月28日,星期一,00:48,归类于 css相关. 阅读 73990 次, 今日 5 次 by zhangxinxu from h ...

  2. CSS+DIV自适应布局

    CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: <!doctype html> <html> <head> ...

  3. 演示:纯CSS实现自适应布局表格

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

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

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

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

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

  6. CSS流体(自适应)布局下宽度分离原则——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1463 一.简短的前言 ...

  7. CSS:CSS弹性盒子布局 Flexible Box

    一.简介 flexbox:全称Flexible Box, 弹性盒子布局.可以简单实现各种伸缩性的设计,它是由伸缩容器和伸缩项目组成.任何一个元素都可以指定为flexbox布局.这种新的布局方案在200 ...

  8. CSS实现栅格布局

    CSS实现栅格布局 设置容器container: .grid-container { width: 100%; max-width: 1200px; } 清除浮动: .row:before, .row ...

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

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

随机推荐

  1. web自己主动保存表单

    note:当中部分源代码来源网络 所用的框架:jquery 实现的功能: 1.自己主动保存表单 2.页面刷新的时候把自己主动保存的值赋值给表单元素 思路: 1.表单值改变的时候自己主动触发函数.保存表 ...

  2. 【转】struct和typedef struct

    原文:http://www.cnblogs.com/qyaizs/articles/2039101.html 分三块来讲述: 1 首先://注意在C和C++里不同 在C中定义一个结构体类型要用type ...

  3. MyReport:DataGrid的打印和打印预览

    本文说明怎样使用MyReport来实现Flex DataGrid组件的自己主动化打印预览和打印功能. 实现代码 <? xmlversion="1.0" encoding=&q ...

  4. IOS编程User Interface基础

    IOS编程之User Interface基础 目录 概述 相关概念 常见问题 状态栏的隐藏 应用图标的设置 概述 IOS用户界面是APP呈现给用户最直观.最常用的方式,因此学会用户界面的编程是学习IO ...

  5. bigDecimal 使用小结

    关于四舍五入: 
ROUND_HALF_UP: 遇到.5的情况时往上近似,例: 1.5 ->;2 
ROUND_HALF_DOWN : 遇到.5的情况时往下近似,例: 1.5 ->;1 注 ...

  6. (圆形imageview 类似qq头像)---》(ps:引用第三库APAvatarImageView>

    使用方法:在故事版上把imageview的class名称设置为APAvatarImageView就可以显示圆形图,其他相关属性可以参考此类. demo下载地址 https://github.com/a ...

  7. css居中的几种方式

    居中分水平和垂直两种,使用的频度也算是很高,下面分情况来讨论一下几种常用的实现方式. 欢迎指正文中的错误,同时如果有学习到新的方式也会更新在后面,也方便以后温故知新. 1.margin 这种方式只能实 ...

  8. 使用 xcode 8 构建版本 iTunes Connect 获取不到应用程序的状态

    今天在提交 APP 审核版本的时候iTunes Connect 一直获取不到应用程序的状态,原因是,14号 xcode 8一出 直接升级使用 xcode 8 打包发布包,然后直接用 xcode8 构建 ...

  9. Hessian矩阵

    http://baike.baidu.com/link?url=o1ts6Eirjn5mHQCZUHGykiI8tDIdtHHOe6IDXagtcvF9ncOfdDOzT8tmFj41_DEsiUCr ...

  10. mysql表的创建和删除

    在创建数据库表时,最好是在编辑器中写好创建表的代码,然后粘贴到命令行中,这样如果有错修改起来方便. 现在来创建一个user表: -- 打开数据库, --后面必须要有空格, 表示注释 USE mydb3 ...