flex盒模型 详细解析

移动端页面布局,采用盒模型布局,效果很好

/* ============================================================

flex:定义布局为盒模型

flex-v:盒模型垂直布局

flex-1:子元素占据剩余的空间

flex-align-center:子元素垂直居中

flex-pack-center:子元素水平居中

flex-pack-justify:子元素两端对齐

兼容性:ios 4+、android 2.3+、winphone8+

============================================================ */

.flex{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}

.flex-v{-webkit-box-orient:vertical;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}

.flex-1{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}

.flex-align-center{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}

.flex-pack-center{-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}

.flex-pack-justify{-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}

这样写,一般都可以兼容高级浏览器内核。

参考 白树大神的文章,而总结得到,感谢 白树。

白树原文链接:http://www.cnblogs.com/PeunZhang/p/3407453.html

下载demo参考链接:http://files.cnblogs.com/files/leshao/flex%E7%9B%92%E6%A8%A1%E5%9E%8B.rar

时间: 2024-10-14 19:02:48

flex盒模型 详细解析的相关文章

使用css3的flex盒模型来实现两栏布局(左侧固定宽度,右侧自适应宽度)

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style> .parent{ height:500px; border:1px solid #222; display:flex;/*设为伸缩容器*/ flex-flow:row;/*伸缩项目单行排列*/ } .stable{ width:200px;/*固定宽度*/ border:1px solid #ccc; ma

使用flex盒模型实现内容完全居中显示

display: flex; justify-content: center; align-items: center; height: 300px;border:1px solid;

I/O模型详细解析

内核空间和用户空间:由于操作系统都包括内核空间和用户空间(或者说内核态和用户态),内核空间主要存放的是内核代码和数据,是供系统进程使用的空间.而用户空间主要存放的是用户代码和数据,是供用户进程使用的空间.目前Linux系统简化了分段机制,使得虚拟地址与线性地址总是保持一致,因此,Linux系统的虚拟地址也是0-4G.Linux系统将这4G空间分为了两个部分:将最高的1G空间(从虚拟地址0xC0000000到0xFFFFFFFF)供内核使用,即为"内核空间",而将较低的3G空间(从虚拟地

CSS学习笔记——盒模型,块级元素和行内元素的区别和区别

今天本来打算根据自己的计划进行前端自动化的学习的,无奈早上接到一个任务需求需要新增一个页面.自从因为工作需要转前端之后,自己的主要注意力几 乎都放在JavaScript上面了,对CSS和HTML这方面其实基础真的很差,今天在写页面的时候就被浮动啊.内外边距啊这些耽误了不少时间. 反思一下,自己确实在这些基础方面的不足很多,所以今后的学习笔记主要是我在工作中遇到的一些问题和他们的解决方法.其中可能中会有JS.CSS.HTML各方面的,我会把自己每一天学到的内容都记录一下,辅助自己打好基础. 今天在

CSS3盒模型之box-sizing

这些天在做一个手机端的页面,遇到了一些问题!首当其冲的就是盒子的溢出问题!大家都知道,手机的尺寸各异,各种型号的手机多得能闪瞎你们的眼睛,为了能 让这些设置更好的浏览我们的页面,我们已经不能固定页面的大小了.所以很多时候我们对于大小的设置都需要使用百分比,嗯,试试看吧! 对于一个导航,我们初始是想这样: 代码如下: css: nav{width: 100%;background: #001125;overflow: hidden} nav a{display: block;float: left

CSS3盒模型温故

CSS有一种基础设计模式叫盒模型,定义了Web页面中的元素是如何看做盒子来解析的.每一个盒子有不同的展示界面,下面就来介绍盒模型,主要有一下几种盒模型:inline.inline-block.block.table.absolute position.float.浏览器把每个元素看做一个盒模型,每个盒模型是由以下几个属性组合所决定的:display.position.float.width.height.margin.paddinghe border等,不同类型的盒模型会产生不同的布局 什么是盒

IE浏览器和CSS盒模型【转】

总结:css盒模型在不同浏览器之间(例如:ie和其他浏览器 如火狐)的差异只存在于ie6之前的版本中,如ie5.在ie6下, Internet Explorer 在标准模式下渲染时使用了 CSS 规范的算法,也就是会显示正确的盒模型,而在 quirks 模式下使用先前的,不规范的算法.即,只有在怪异模式下,css盒模型才会在ie和火狐下存在差异. 但是实际上我们都是使用标准的模式,只要为文档设置一个DOCTYPE,就会使得IE遵循标准兼容模式的方式工作. //以下摘自百度百科"怪异模式"

盒模型对比

W3C的标准盒模型:外盒尺寸计算(元素空间尺寸):element 空间高度 = 内容高度 + 内边距 + 边框 + 外边距element 空间宽度 = 内容宽度 + 内边距 + 边框 + 外边距 内盒尺寸计算(元素大小):element 高度 = 内容高度 + 内边距 + 边框element 宽度 = 内容宽度 + 内边距 + 边框 IE传统盒模型(IE6以下,不包括IE6):外盒尺寸计算(元素空间尺寸):element 空间高度 = 内容高度(包括了height+padding+border)

详细介绍弹性盒模型(display:flex)

弹性盒模型,即Flexbox,是css3中的新特性,其实弹性盒模型的原身是dispaly:box:这里,我们暂时不考虑旧的,我们只看新的. 为容器指定弹性盒子,只需在父元素(也就是容器)中设置:display:flex:(注意,webkit内核的需要加webkit前缀,行内元素设置弹性盒子的话,设置display:inline-flex:而且,设置了弹性盒子,子元素的float,clear,vertical属性都将失效). 弹性盒子默认有两条轴,横轴和纵轴,默认横轴为主轴(默认自左向右)纵轴为辅