浅谈 css3 box盒子模型以及box-flex的使用
display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分。
一、使用以及介绍:
.parent{display:box or -moz-box or -wekit-box}
.panel1{box-flex : 1};
.panel2{box-flex : 2};
.panel3{box-flex : 3};
horizontal //水平
vertical // 垂直
inline-axis //也算是水平
block-axis//也算是垂直,跟垂直没有什么区别
inherit // 水平,垂直
p.s : 当设置了水平(horizontal)或者 inline-axis 的话,如果父容器设置了高度,子容器的高度会跟父容器保持一致(即时子容器设置了高度也无效)。如果父容器不设置高度值,其子容器的高度值才有效并且取最大高度值的子容器的高度。同理,如果设置了垂直(vertical) or block-axis 父容器设置了宽度的话,子容器设置宽度会无效。如果父容器不设置宽度值,其子容器的宽度值才有效并且取最大宽度值的子容器的宽度
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, 子容器没有设置高度, 设置此属性的时候,子容器的高度变成自身的高度
start 代表向左对齐
end 代表向右对齐,类似与float:right
center 居中对齐, 类似div.设定了宽度,然后margin: 0 auto
justify : 就是自适应撑开到父容器的宽度
二、常见问题总结
.parent{display:box or -moz-box or -wekit-box}
.panel1{box-flex : 1};
.panel2{box-flex : 2;width:200px};
.panel3{box-flex : 3};
浅谈 css3 box盒子模型以及box-flex的使用的更多相关文章
- CSS的盒子模型(Box Model)
盒子模型(Box Model)是 CSS 的核心,现代 Web 布局设计简单说就是一堆盒子的排列与嵌套,掌握了盒子模型与它们的摆放控制,会发现再复杂的页面也不过如此. 然而,任何美好的事物都有缺憾,盒 ...
- CSS3.0盒模型display:box;的使用
CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂 ...
- 浅谈CSS3中display属性的Flex布局
浅谈CSS3中display属性的Flex布局 最近在学习微信小程序,在设计首页布局的时候,新认识了一种布局方式display:flex 1 .container { 2 display: fle ...
- css3弹性盒子模型
当下各种手机,平板尺寸不一,如果盒模型只能固定尺寸,不能随意压缩,将不能很好的迎合这个时代.所以css3推出了新的盒模型——弹性盒子模型(Flexible Box Model). 弹性盒模型可以水平布 ...
- css3弹性盒子模型之box-flex
css3弹性盒子模型之box-flex 浏览器支持 目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chr ...
- CSS盒子模型(Box Model)
一.背景 作为CSS的重点,三大模块之一的盒子模型,这部分无论如何也要精通透彻.在任何一个网页当中,都有自己的布局方式,所谓网页布局方式就是如何把网页里面的文字.图片,很好的排版成美工设计的样式,这时 ...
- CSS 盒子模型(Box model)中的 padding 与 margin
本文将讲述 HTML 和 CSS 的关键—盒子模型 (Box model) .理解 Box model 的关键便是 margin 和 padding 属性,而正确理解这两个属性也是学习用 CSS 布局 ...
- CSS3 Box-sizing(盒子模型)
http://www.w3cplus.com/content/css3-box-sizing http://tantek.com/CSS/Examples/boxmodelhack.html box- ...
- css3的盒子模型布局
写在前面的话: css3盒子布局,可以更简单直观的均分页面某一个div,并且还可以达到均分后的每一个元素中的内容上下居中.左右居中,但是该模型对浏览器的版本有要求: { display: -webki ...
随机推荐
- easymock入门贴
from:http://macrochen.iteye.com/blog/298032 关于EasyMock常见的几个问题, 这里(http://ozgwei.blogspot.com/2007/06 ...
- java/android线程池详解
一,简述线程池: 线程池是如何工作的:一系列任务出现后,根据自己的线程池安排任务进行. 如图: 线程池的好处: 重用线程池中的线程,避免因为线程的创建和销毁所带来的性能开销. 能有效控制线程池的最大并 ...
- Builder
Builder模式的使用情景 相同的方法, 不同的执行顺序, 产生不同的事件结果 多个部件或零件, 都可以装配到一个对象中, 但是产生的运行结果又不相同 产品类比较复杂, 或者产品类中的调用顺序不同产 ...
- 深入理解DLL文件
1.LIB与DLL文件的区别 DLL是一个完整的程序,称为“动态链接库”,DLL中包含的主要有三块内容:1.全部变量 2.函数接口 3.资源:DLL中有一个函数导出表,其中每一项都是一个函数名称.通过 ...
- PL/pgSQL函数带output参数例子
例子1,不带returns : [postgres@cnrd56 bin]$ ./psql psql () Type "help" for help. postgres=# CRE ...
- 使用RemObjects Pascal Script (转)
http://www.cnblogs.com/MaxWoods/p/3304954.html 摘自RemObjects Wiki 本文提供RemObjects Pascal Script的整体概要并演 ...
- Visual C++内存泄露检测—VLD工具使用说明[转]
Visual C++内存泄露检测—VLD工具使用说明 一. VLD工具概述 Visual Leak Detector(VLD)是一款用于Visual C++的免费的内存泄露检测工具.他的 ...
- stm32 IAP + APP ==>双剑合一
(扩展-IAP主要用于产品出厂后应用程序的更新作用,上一篇博文详细的对IAP 升级程序做了详细的分析http://blog.csdn.net/yx_l128125/article/details/12 ...
- crm2011创建货币Money类型的字段
using System; using Microsoft.Xrm.Sdk; using Microsoft.Xrm.Sdk.Messages; using Microsoft ...
- Xcode常见的编译、运行等错误的解决
Xcode常见的编译.运行等错误的解决 项目没找到Info.plist的错误 The solution for this particular instance of the error was “I ...