一、简介

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. Remove Duplicates from Sorted List II

    Remove Duplicates from Sorted List II Given a sorted linked list, delete all nodes that have duplica ...

  2. bzoj 1296: [SCOI2009]粉刷匠

    Description windy有 N 条木板需要被粉刷. 每条木板被分为 M 个格子. 每个格子要被刷成红色或蓝色. windy每次粉刷,只能选择一条木板上一段连续的格子,然后涂上一种颜色. 每个 ...

  3. git提交时支持文件名大小写的修改

    在windows环境下,git提交文件时,默认对文件名大小写不敏感,若修改了文件名字的大小写,可能会导致提交时没有记录,文件名修改不成功.网上搜集了几种解决方法,现总结下: 1. 修改git conf ...

  4. 使用Nancy.Host实现脱离iis的Web应用

    本篇将介绍如何使用Nancy.Host实现脱离iis的Web应用,在开源任务管理平台TaskManagerV2.0代码里面已经使用了Nancy.Host实现自宿主的Web应用.学习Nancy之前最好了 ...

  5. Visual Studio 2015 Pre Secondary Installer 在哪里

    安装vs2015 pre后,会自动打开Secondary Installer, 用于Cross Platform的移动开发框架,包括Cordova插件.若安装失败,启动程序位置: "D:\P ...

  6. redis 的源码编译安装

    首先我们下载软件包到指定的目录下 tar -zxvf redis-2.8.19.tar.gz cd redis-2.8.19 make make PREFIX=/usr/local/redis ins ...

  7. CSS3幻灯片制作心得

    大神勿喷,这是小弟自己学习的痕迹. CSS3动画效果核心代码 @keyframes slideLeft { 0% { left: -500px; } 100% { ; } } @keyframes s ...

  8. BZOJ 3236: [Ahoi2013]作业

    3236: [Ahoi2013]作业 Time Limit: 100 Sec  Memory Limit: 512 MBSubmit: 1393  Solved: 562[Submit][Status ...

  9. wpf打开文夹和打开文件

    WPF调用WinForm中的 OpenFileDialog 和 FolderBrowserDialog 来实现响应的功能 OpenFileDialog openFileDialog = new Ope ...

  10. 大二在CSDN的博客整理

    001我为什么想写博客 控制台版2048 version_1.0总结 022 囚徒困境中的均衡-----从一篇经典论文说起 021 模拟退火算法学习(一)-----求解最短连通路径 020 小记一次网 ...