自适应布局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. SAE J1708 DS36277 MAX3444, DS75176B

    http://en.wikipedia.org/wiki/J1708 J1708 SAE J1708 is a standard used for serial communications betw ...

  2. Sqlite表的结构修改

    Sqlite删除列方法 http://blog.csdn.net/aben_2005/article/details/6563538 SQLite3 table 结构修改 http://blog.cs ...

  3. cdoj 93 King's Sanctuary 傻逼几何题

    King's Sanctuary Time Limit: 20 Sec  Memory Limit: 256 MB 题目连接 http://acm.uestc.edu.cn/#/problem/sho ...

  4. 说说C#静态变量的诡异与恶心

    发现一段很诡异的C#代码,见识了静态构造函数这种奇怪的东西: using System; namespace StaticTest { class A { public static int X; s ...

  5. Bootstrap 教程

    Bootstrap,来自 Twitter,是基于 HTML.CSS.JAVASCRIPT 的简介灵活的流行前段框架及交互组件集. 内容列表 Bootstrap 教程 Bootstrap 教程 Boot ...

  6. 一步步学Mybatis-实现单表情况下的CRUD操作 （3）

    今天这一章要紧接上一讲中的东西,本章中创建基于单表操作的CRUD与GetList操作,此示例中以Visitor表为范例,为了创建一点测试数据我们先弄个Add方法吧 继续在上次的IVisitorOper ...

  7. 【JavaScript】Understanding callback functions in Javascript

    Callback functions are extremely important in Javascript. They’re pretty much everywhere. Originally ...

  8. except ShortInputException,x中逗号

    class ShortInputException(Exception): def __init__(self, length, atleast): Exception.__init__(self) ...

  9. MHA参数 转

    http://blog.csdn.net/wulantian/article/details/12503473 http://blog.csdn.net/wulantian/article/categ ...

  10. systemtap-与 oracle 转

    https://baoz.net/using-systemtap/ http://nanxiao.me/category/%E6%8A%80%E6%9C%AF/systemtap-%E7%AC%94% ...