display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。

 

一、使用以及介绍:

1、要实现水平或者垂直切分,必须先满足以下要求
  i. display : box必须用在对应的父窗口,比如div.parent>div.panel*3 这种格局, parent 必须先先定义此属性
  ii. .panel的元素定义box-flex,来实现按比例切分。如下图:就是将三个div水平切分成6份    

.parent{display:box or -moz-box or -wekit-box}
.panel1{box-flex : 1};
.panel2{box-flex : 2};
.panel3{box-flex : 3};
上面罗列的是一个简单的例子,在这个基础上我们如果想垂直布局呢,理论上按我们现在的布局去理解的话就是div.panel1+div.panel2+div.panel3 这种方式也可以,但我们今天考虑到box这个,所以下面用box来实现这个
 
2、垂直布局的话涉及到另外一个属性:box-orient(父元素上) :  这个属性有以下几个值

horizontal //水平
vertical // 垂直
inline-axis //也算是水平
block-axis//也算是垂直,跟垂直没有什么区别
inherit // 水平,垂直
p.s : 当设置了水平(horizontal)或者 inline-axis 的话,如果父容器设置了高度,子容器的高度会跟父容器保持一致(即时子容器设置了高度也无效)。如果父容器不设置高度值,其子容器的高度值才有效并且取最大高度值的子容器的高度。同理,如果设置了垂直(vertical) or block-axis 父容器设置了宽度的话,子容器设置宽度会无效。如果父容器不设置宽度值,其子容器的宽度值才有效并且取最大宽度值的子容器的宽度

 
 
 
现在水平排版垂直排版都没有问题了,但是我有时候想实现凹凸的水平布局(如:中间突出a,两边登高b,c)或者凹凸垂直布局,这种的话,那怎么弄呢?需要这样子的话,当然就不能用上面所说的box-orient啦,这样子的话盒子里面的宽高都可以不同
那我们能否实现bc模块与a模块垂直对齐,水平对齐呢?
 
3、那我们就可以用到这个属性:box-align(用在父元素上): 其有以下属性值

start  // 理解为valign = top 以顶部对齐, 、
end //理解为 valign = bottom 以底部对齐
center // 理解为 valign = center 以居中对齐
baseline //理解为以某一个元素的基准线进行对齐,
stretch(默认值) //以最大的一块的高度或者宽度拉伸,以哪个方位进行拉伸取决于你是水平对齐还是垂直对齐,如果子容器没有定义高度则以父容器的宽度或者高度拉伸

p.s
当父容器有宽度高度的时候
1、如果是水平切分,设置box-align的值不等于stretch(拉伸)的时候,内容的子容器的高度不再是父容器的高度,而变成了自身的高度了。比如说父容器height:200px, 子容器没有设置高度, 设置此属性的时候,子容器的高度变成自身的高度
2、如果是水平切分,设置box-align的值不等于stretch(拉伸)的时候,内容的子容器的高度不再是父容器的高度,而变成了自身的高度了。比如说父容器height:200px, 子容器没有设置高度, 设置此属性的时候,子容器的高度变成自身的高度
 
 
4、box-pack表示父容器里面子容器的水平对齐方式,可选参数如下所示,此参数要生效的话前提条件是: 子容器的总长度<父容器的宽度,这个设置才能起效(自己写的demo出来的结果)
start 代表向左对齐
end 代表向右对齐,类似与float:right
center 居中对齐, 类似div.设定了宽度,然后margin: 0 auto
justify : 就是自适应撑开到父容器的宽度
 
 
 
 

二、常见问题总结

1、要实现某一块宽度定死,那这个布局是怎么布的呢,结果又是什么,如下demo
.parent{display:box or -moz-box or -wekit-box}
.panel1{box-flex : 1};
.panel2{box-flex : 2;width:200px};
.panel3{box-flex : 3};
这样子写的话(既有比例区分,又有精确的宽度的话,比例无效) 这时候中间这块永远都是200px,两边的两块根据父容器宽度-200px 在进行比例切分,这个也符合我们的要求。

浅谈 css3 box盒子模型以及box-flex的使用的更多相关文章

  1. CSS的盒子模型(Box Model)

    盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此. 然而,任何美好的事物都有缺憾,盒 ...

  2. CSS3.0盒模型display:box;的使用

    CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...

  3. 浅谈CSS3中display属性的Flex布局

    浅谈CSS3中display属性的Flex布局   最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...

  4. css3弹性盒子模型

    当下各种手机,平板尺寸不一,如果盒模型只能固定尺寸,不能随意压缩,将不能很好的迎合这个时代.所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model). 弹性盒模型可以水平布 ...

  5. css3弹性盒子模型之box-flex

    css3弹性盒子模型之box-flex 浏览器支持 目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chr ...

  6. CSS盒子模型(Box Model)

    一.背景 作为CSS的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻.在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字.图片,很好的排版成美工设计的样式,这时 ...

  7. CSS 盒子模型(Box model)中的 padding 与 margin

    本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...

  8. CSS3 Box-sizing(盒子模型)

    http://www.w3cplus.com/content/css3-box-sizing http://tantek.com/CSS/Examples/boxmodelhack.html box- ...

  9. css3的盒子模型布局

    写在前面的话: css3盒子布局,可以更简单直观的均分页面某一个div,并且还可以达到均分后的每一个元素中的内容上下居中.左右居中,但是该模型对浏览器的版本有要求: { display: -webki ...

随机推荐

  1. easymock入门贴

    from:http://macrochen.iteye.com/blog/298032 关于EasyMock常见的几个问题, 这里(http://ozgwei.blogspot.com/2007/06 ...

  2. java/android线程池详解

    一,简述线程池: 线程池是如何工作的:一系列任务出现后,根据自己的线程池安排任务进行. 如图: 线程池的好处: 重用线程池中的线程,避免因为线程的创建和销毁所带来的性能开销. 能有效控制线程池的最大并 ...

  3. Builder

    Builder模式的使用情景 相同的方法, 不同的执行顺序, 产生不同的事件结果 多个部件或零件, 都可以装配到一个对象中, 但是产生的运行结果又不相同 产品类比较复杂, 或者产品类中的调用顺序不同产 ...

  4. 深入理解DLL文件

    1.LIB与DLL文件的区别 DLL是一个完整的程序,称为“动态链接库”,DLL中包含的主要有三块内容:1.全部变量 2.函数接口 3.资源:DLL中有一个函数导出表,其中每一项都是一个函数名称.通过 ...

  5. PL/pgSQL函数带output参数例子

    例子1,不带returns : [postgres@cnrd56 bin]$ ./psql psql () Type "help" for help. postgres=# CRE ...

  6. 使用RemObjects Pascal Script (转)

    http://www.cnblogs.com/MaxWoods/p/3304954.html 摘自RemObjects Wiki 本文提供RemObjects Pascal Script的整体概要并演 ...

  7. Visual C++内存泄露检测—VLD工具使用说明[转]

    Visual C++内存泄露检测—VLD工具使用说明 一.        VLD工具概述 Visual Leak Detector(VLD)是一款用于Visual C++的免费的内存泄露检测工具.他的 ...

  8. stm32 IAP + APP ==>双剑合一

    (扩展-IAP主要用于产品出厂后应用程序的更新作用,上一篇博文详细的对IAP 升级程序做了详细的分析http://blog.csdn.net/yx_l128125/article/details/12 ...

  9. crm2011创建货币Money类型的字段

    using System;     using Microsoft.Xrm.Sdk;     using Microsoft.Xrm.Sdk.Messages;     using Microsoft ...

  10. Xcode常见的编译、运行等错误的解决

    Xcode常见的编译.运行等错误的解决 项目没找到Info.plist的错误 The solution for this particular instance of the error was “I ...