html响应式弹性布局,CSS3响应式布局之弹性盒子

CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局。同时该盒子决定了一个盒子在其他盒子的分布方式，及如何处理可用的空间。

自己写了一个弹性盒子的demo：

主要HTML代码：

1

2

3

4

CSS代码：

.outer {

width:500px; height:300px;

display: -webkit-box; /*使用弹性盒模型*/

-webkit-box-orient:vertical;/*水平或垂直分布 horizional/vertical*/

-moz-box-orient:vertical;

-webkit-box-direction:reverse;/*规定子元素的显示方向 normal/reverse/inherit 默认/相反/继承子元素的box-derection*/

-moz-box-direction:reverse;

-webkit-box-align:center;/*规定如何对齐子元素的*/

-moz-box-align:center;

-webkit-box-pack:center;/*水平或垂直管理子盒子*/

-moz-box-pack:center;

}

#div1 {

background-color:darkcyan;

-webkit-box-flex: 1; /*规定子盒子是否可伸缩，值越大占的空间就越大*/

-moz-box-flex:1;

}

#div2 {

background-color:darkmagenta;

-webkit-box-flex:1;

-moz-box-flex:1;

}

#div3 {

background-color:seagreen;

-webkit-box-flex:1;

-moz-box-flex:1;

}

#div4 {

background-color:maroon;

-webkit-box-flex:1;

-moz-box-flex:1;;

}

在不用 webkit-box-align:center;webkit-box-pack:center;这两个属性的情况下div分布情况；

在使用box-align:center;box-pack:center;情况下，为了方便没写指定内核属性如webkit/moz

最后如有不恰当的地方还希望大家指正；谢谢。

html5/css3响应式布局介绍及设计流程

html5/css3响应式布局介绍 html5/css3响应式布局介绍及设计流程,利用css3的media query媒体查询功能.移动终端一般都是对css3支持比较好的高级浏览器不需要考虑响应式布局 ...

CCS3的过渡、变换、动画以及响应式布局、弹性布局

CSS3 过渡 .变换.动画 在没有CSS3之前,如果页面上需要一些动画效果,要么你自己编写 JavaScript,要么使用 JavaScript 框架(如 jQuery)来提高效率. 但是CSS3出 ...

静态布局、自适应布局、流式布局、响应式布局、弹性布局简析、BFC

静态布局:给页面元素设置固定的宽度和高度,单位用px,当窗口缩小,会出现滚动条,拉动滚动条显示被遮挡内容.针对不同分辨率的手机端,分别写不同的样式文件.例如:浏览器窗口是1000px,那么最小的宽度是 ...

CSS3–2.css3 响应式布局

1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...

css3响应式布局

响应式布局 分栏布局,-webkit-column-width(定义每栏的宽度,会根据每栏宽度自动分成若干栏)

CSS3 响应式布局： @media (min/max-width:***) @font-face

响应式布局 responsive design @media 属性 bootstrap  css 分析: @media (min-width:768px){ body{***} } use @medi ...

css3 响应式布局 Media Query

1.什么是响应式布局? 响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简单说就是一个网站能够兼容多个终端. 2.响应式布局的优缺点? 优点:面对不同分辨率设备灵活性强,快捷 ...

CSS3–2.css3 响应式布局

1.响应式布局 响应式布局是现在很流行的一个设计理念,随着移动互联网的盛行,为解决如今各式各样的浏览器分辨率以及不同移动设备的显示效果,设计师提出了响应式布局的设计方案.所谓的响应式布局,就是一个网站 ...

css3响应式布局教程—css3响应式

响应式布局 一个网站能够兼容多个终端,并且在各个终端都可以很好展示体验. 媒体类型 在何种设备或者软件上将页面打开 123456789 all:所有媒体braille:盲文触觉设备embossed:盲 ...

随机推荐

Kooboo CMS 之TextContent详解

TextCotent 在Kooboo.CMS.Content下面,在View中有使用到这个模型层. TextContent继承了ContentBase,而ContentBase是由2个部分类组成的,一 ...

dedecms为后台自定义菜单的完整方法

dedecms为后台自定义菜单的完整方法 品味人生 dedeCMS 围观7330次 18 条评论 编辑日期:2014-06-14 字体:大 中 小   最近在给客户定制一个企业网站,客户要求使用ded ...

Android开发艺术探索笔记—— View(一)

Android开发艺术探索笔记 --View(一) View的基础知识 什么是View View是Android中所有控件的基类.是一种界面层控件的抽象. View的位置参数 参数名 获取方式 含义 ...

poj 2661 Factstone Benchmark (Stirling数)

//题意是对于给定的x,求满足n! <= 2^(2^x)的最大的n//两边同取以二为底的对数,可得: lg2(n!) <= 2^x 1.   log2(n!) = log2(1) + lo ...

从Keil 4升级到Keil 5的工程，想返回来用Keil 4打开

情景描述: 笔者电脑程序Keil 4升级到Keil 5,相应地,原来项目上的工程也在第一次用Keil 5打开的时候进行了升级.之后,由于客户需要开发资料,其版本为Keil 4,我尝试着用Keil 4打 ...

URL学习笔记

不多说,先上代码,代码的注释写的已经挺详细的了 //URL:统一资源定位符,一个URL的对象,对应着互联网上的一个资源. //我们可以通过URL的对象调用其相应的方法,将此资源读取(即所谓的“下载”) ...

&lpar;转&rpar;SQL中的ISNULL函数介绍

SQL中有多种多样的函数,下面将为您介绍SQL中的ISNULL函数,包括其语法.注释.返回类型等,供您参考,希望对您学习SQL能够有所帮助. ISNULL 使用指定的替换值替换 NULL. 语法ISN ...

-force&lowbar;load

Crash Log: Last Exception Backtrace: 0   CoreFoundation                 0x2f087f06 __exceptionPrepro ...

java导入项目有红色叹号

原因:缺少jar包 解决:         选中项目  ->  右键  -> Build Path  -> Configer Builder Path  ->  删除掉有错的J ...

ionic3 对android包进行签名

在已经生成签名文件的前提下 对android包进行签名 如果还未生成签名文件 请参考链接 https://jingyan.baidu.com/article/642c9d34eaeeda644a46f ...