一、简介

css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。

目前box属性还没有得到firefox、chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-)、chrome/safari(-webkit-)。所以完全可以在手机端的webview页面中采取这样的布局。

二、弹性盒模型

默认情况下,盒子并不具有弹性,如果box-flex的属性值至少为1时,则变得富有弹性。如果盒子不具有弹性,它将尽可能的宽使其内容可见,且没有任何溢出,其大小由“width”和“height”来决定(或min-height、min-width、max-width、max-height)。

弹性盒模型使用细则:

1.必须给父容器定义display: box,其子元素才可以进行划分。

如果给class为p1的子元素设置box-flex设置为3,给class为p2的子元素设置box-flex为1,给class为p3的子元素设置box-flex为1,说明分别给其设置3等分和1等分和1等分。

即给class为p1的子元素设置宽度为100%*3/5=60%;给class为p2的子元素设置宽度为100%*1/5=20%;给class为p3的子元素设置宽度为100%*1/5=20%;

2.如果进行父容器划分的同时,他的子元素有的设置了固定宽度,有的要进行划分的话,那么划分的宽度 = 父容器的宽度 – 已经设置的固定宽度 。再进行对应的划分。

三、box属性

具体的属性有:box-orient | box-direction | box-align | box-pack | box-lines

1、box-orient

常用的几个属性值是:horizontal | vertical | inherit

horizontal:子元素水平排列;vertical:子元素竖直排列;inherit:子元素竖直排列并且让子元素继承父元素的相关属性。

2、box-direction

常用的两个属性值是:normal | reverse

normal是默认值,按照HTML文档里的结构的先后顺序依次展示;reverse表示反转。

3、box-align

box-align 表示父容器里面子容器的垂直对齐方式,可选参数如下表示:start | end | center | baseline | stretch。

4、box-pack

box-pack 表示父容器里面子容器的水平对齐方式,可选参数如下表示:start | end | center | justify。

四、常用demo

1、html

 <div class="wrap">
<div class="box1">hello box1</div>
<div class="box2">hello box2</div>
<div class="box3">hello box3</div>
</div>

2、demo1--style--水平排列

 .wrap{
height:60px;
display:-moz-box;
display:-webkit-box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
/* -moz-box-direction:reverse;
-webkit-box-direction:reverse;*/
}
.box1{background:orange;}
.box2{background:#ccc;}
.box3{background:green;}

3、demo1--style--inherit

 .wrap{
height:60px;
display:-moz-box;
display:-webkit-box;
-moz-box-orient:inherit;
-webkit-box-orient:inherit;
}
.box1{background:orange;}
.box2{background:#ccc;}
.box3{background:green;}

4、demo1--style--具体分布顺序

 .wrap{
display:-moz-box;
display:-webkit-box;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
}
.box1{
height:60px;
background:orange;
-moz-box-ordinal-group:;
-webkit-box-ordinal-group:;
}
.box2{
height:60px;
background:#ccc;
-moz-box-ordinal-group:;
-webkit-box-ordinal-group:;
}
.box3{
height:60px;
background:green;
-moz-box-ordinal-group:;
-webkit-box-ordinal-group:;
}

5、demo1--style--弹性盒子

 .wrap{
display:-moz-box;
display:-webkit-box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
}
.box1{
height:60px;
background:orange;
-moz-box-flex:;
-webkit-box-flex:;
}
.box2{
height:60px;
background:#ccc;
-moz-box-flex:;
-webkit-box-flex:;
}
.box3{
height:60px;
background:green;
-moz-box-flex:;
-webkit-box-flex:;
}

6、demo1--style--inherit+弹性盒子

 .wrap{
height:60px;
display:-moz-box;
display:-webkit-box;
-moz-box-orient:inherit;
-webkit-box-orient:inherit;
}
.box1{
background:orange;
-moz-box-flex:;
-webkit-box-flex:;
}
.box2{
background:#ccc;
-moz-box-flex:;
-webkit-box-flex:;
}
.box3{
background:green;
-moz-box-flex:;
-webkit-box-flex:;
}

7、demo1--style--弹性盒子与固有宽度混用

 .wrap{
display:-moz-box;
display:-webkit-box;
-moz-box-orient:horizontal;
-webkit-box-orient:horizontal;
}
.box1{
height:60px;
background:orange;
-moz-box-flex:;
-webkit-box-flex:;
}
.box2{
height:60px;
background:#ccc;
-moz-box-flex:;
-webkit-box-flex:;
}
.box3{
height:60px;
background:green;
width:80px;
}

五、总结自适应页面布局

bootstrap栅格布局 - 弹性盒模型 - table布局(display:table-cell;)

六、弹性盒子(新)

1、简介:
弹性盒子(旧):display:box; 弹性盒子(新):display:flex; 下面介绍的就是新的弹性盒子:
弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。弹性容器通过设置 display 属性的值为 flex 或 inline-flex 将其定义为弹性容器。弹性容器内包含了一个或多个弹性子元素。弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

2、在弹性盒子中常用到的属性:

(1)flex-direction - 指定了弹性容器中子元素的排列方式。它的属性值如下:

row:横向从左到右排列(左对齐),默认的排列方式;row-reverse:反转横向排列(右对齐),从后往前排,最后一项排在最前面。
column:纵向排列;column-reverse:反转纵向排列,从后往前排,最后一项排在最上面。

(2)justify-content - 设置弹性盒子元素在主轴(横轴)方向上的对齐方式。它的属性值如下:

flex-start:弹性项目向行头紧挨着填充。(默认值)
flex-end:弹性项目向行尾紧挨着填充。
center:弹性项目居中紧挨着填充。
space-between:弹性项目平均分布在该行上。
space-around:弹性项目平均分布在该行上,两边留有一半的间隔空间。

(3)align-items - 设置弹性盒子元素在侧轴(纵轴)方向上的对齐方式。它的属性值如下:

flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。
baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。(默认值)

(4)flex-wrap - 用于指定弹性盒子的子元素换行方式。它的属性值如下:

nowrap:默认,弹性容器为单行。该情况下弹性子项可能会溢出容器。
wrap:弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行,子项内部会发生断行。
wrap-reverse:反转 wrap 排列。

(5)align-content - 用于修改 flex-wrap 属性的行为,类似 align-items, 但不是设置子元素对齐,而是设置行对齐。它的属性值如下:

stretch:默认,各行将会伸展以占用剩余的空间。
flex-start:各行向弹性盒容器的起始位置堆叠。
flex-end:各行向弹性盒容器的结束位置堆叠。
center:各行向弹性盒容器的中间位置堆叠。
space-between:各行在弹性盒容器中平均分布。
space-around:各行在弹性盒容器中平均分布,两端保留子元素与子元素之间间距大小的一半。

(6)order - 设置弹性盒子的子元素排列顺序。用整数值来定义排列顺序,数值小的排在前面。可以为负值。

(7)align-self - 在弹性子元素上使用。覆盖容器的 align-items 属性。

auto:其计算值为元素的父元素的'align-items'值,如果其没有父元素,则计算值为'stretch'。
flex-start:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴起始边界。
flex-end:弹性盒子元素的侧轴(纵轴)起始位置的边界紧靠住该行的侧轴结束边界。
center:弹性盒子元素在该行的侧轴(纵轴)上居中放置。
baseline:如弹性盒子元素的行内轴与侧轴为同一条,则该值与'flex-start'等效。其它情况下,该值将参与基线对齐。
stretch:如果指定侧轴大小的属性值为'auto',则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照'min/max-width/height'属性的限制。

(8)flex - 设置弹性盒子的子元素如何分配空间。

网上参考:

http://www.runoob.com/css3/css3-flexbox.html

css3弹性盒模型的更多相关文章

  1. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  2. css3基础教程:CSS3弹性盒模型

    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

  3. CSS3弹性盒模型,Flex布局教程

    布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型 ...

  4. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

  5. css3弹性盒模型flex快速入门与上手(align-content与align-items)

    接着上文css3弹性盒模型flex快速入门与上手1继续,上文还剩下两个父容器的属性align-items和align-content. 一.align-content:多行的副轴对齐方式 含义 多行的 ...

  6. css和css3弹性盒模型实现元素宽度(高度)自适应

    一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <me ...

  7. (转)详解css3弹性盒模型(Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

  8. CSS3弹性盒模型flexbox完整版教程

    http://caibaojian.com/flexbox-guide.html 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了 ...

  9. CSS3弹性盒模型之box-orient & box-direction

    Css3引入了新的盒模型——弹性盒模型,其实上一篇文章已经讲到了一个box-flex,今天来讲讲另外的两个弹性盒模型属性box-orient 和 box-direction. 1.box-origen ...

随机推荐

  1. ZooKeeper 笔记(5) ACL(Access Control List)访问控制列表

    zk做为分布式架构中的重要中间件,通常会在上面以节点的方式存储一些关键信息,默认情况下,所有应用都可以读写任何节点,在复杂的应用中,这不太安全,ZK通过ACL机制来解决访问权限问题,详见官网文档:ht ...

  2. CentOS 7.1, 7.2 下安装dotnet core

    .NET CORE的官方(http://dotnet.github.io/getting-started/)只提供了Windows, Ubuntu14.04, 及Docker(也是基于Ubuntu14 ...

  3. jquery:validate的例子

    该文档转载自 http://ideabean.javaeye.com/blog/363927 官方网站 http://bassistance.de/jquery-plugins/jquery-plug ...

  4. 经典SQL语句大全

    一.基础 1.说明:创建数据库CREATE DATABASE database-name 2.说明:删除数据库drop database dbname3.说明:备份sql server--- 创建 备 ...

  5. 直接启动tomcat时为tomcat指定JDK

    第一种: 在windows环境下以批处理文件方式启动tomcat,只要运行<CATALINA_HOME>/bin/startup.bat这个文件,就可以启动Tomcat.在启动时,star ...

  6. Windows Iot:让Raspberry Pi跑起来(1)

    首先请大家原谅我的"不务正业",放着RabbitHub不写,各种系列的文章不写搞什么Iot,哈哈,最近心血来潮想搞个速度极快的遥控车玩,望着在角落的Raspberry Pi恶狠狠的 ...

  7. 77 swapoff-关闭系统交换区

    Linux swapoff命令用于关闭系统交换区(swap area). swapoff实际上为swapon的符号连接,可用来关闭系统的交换区. 语法 swapoff [设备] 参数: -a 将/et ...

  8. 【USACO 2.4】The Tamworth Two

    题意:C代表cows,F代表farmer,一开始都向北,每分钟前进1步,如果前方不能走,则这分钟顺时针转90°,问多少步能相遇,或者是否不可能相遇,10*10的地图. 题解:dfs,记录状态,C和F的 ...

  9. pthread_cond_signal惊群现象

    1.如下代码所示: #include <stdio.h> #include <stdlib.h> #include <unistd.h> #include < ...

  10. 将DataTable生成树json

    protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) { ListMenu(); } } protected ...