文档章节

css3弹性盒布局

一只小蚂蚁
 一只小蚂蚁
发布于 2015/01/05 13:54
字数 1061
阅读 304
收藏 7

随着对html5的了解越来越多,css3的很多新属性也不断被挖掘.趁今天有空,跟大家分享一下css3弹性盒模型。让自己的理解也加深一下,相信高手在民间,望多指教。

css3弹性盒布局相对于表格灵活很多,在设计复杂的页面运用非常有益。可以轻松地实现当屏幕和浏览器窗口大小发生变化时保持元素的相对位置和大小不变。

不同于css2中盒布局以及内联布局,弹性盒布局不受浮动的影响的。但是其定义不足以支持那种需要根据用户代理从竖直切换成水平等变化而进行方向切换、大小调整、拉伸、收缩的引用组件。

比如:chrome下设置为水平轴伸缩,其他浏览器上也只能设置为水平伸缩。针对于响应式设计时很少用。

弹性盒布局中的术语

1).弹性容器:弹性容器也就是所有弹性元素的父容器。

2).弹性子元素:弹性容器的所有子元素都是弹性子元素。

3).轴:弹性盒布局中分主轴和侧轴。主轴是布局布局的方向,侧轴垂直于主轴。

4).方向: 弹性容器的主轴开始、主轴结束和侧轴开始、侧轴结束 边缘代表了弹性子元素排列的起始和结束位置。同时可以改变属性值来改变显示位置。

       

弹性盒布局语法经历的版本规范

1).新规范:最新版本规范的语法,即"display: flex"。

2).中间版本:2011 年的非官方规范的语法,即"display: flexbox"。

3).老规范:2009 年的规范的语法,即"display: box"。


弹性盒布局运用(以09版规范的语法为例)

[color=Red]注:兼容不同浏览器,css属性和属性值应加上代理前缀。如:webkit内核代理在设置display:box时  box应加上前缀display:-webkit-box[/color]

1).弹性容器的设置:display:box | inline-box 

   box设置为块级弹性布局,inline-box设置为内联级弹性布局

2).布局流方向:box-orient:horizontal | vertical | inline-axis | block-axis

   horizontal:从左到右水平布局;vertical:从上到下垂直布局;inline-axis:弹性子元素沿着内联轴排列显示;block-axis:弹性子元素沿着块轴排列显示;

3).布局顺序:box-direction:normal | reverse

   normal:正常显示顺序;reverse:反向显示顺序

4).伸缩换行:box-lines:single | multiple

   single:弹性子元素一行或一列显示。内容溢出隐藏;multiple:弹性子元素可以多行或多列显示,内容溢出不隐藏。

5).主轴对齐:box-pack: start | end | center | justify

   start:弹性子元素向一行或一列的起始位置靠起;end:和start值相反;center:弹性子元素向一行或一列中的中间位置靠起;justify:弹性子元素平均分布在一行或一列中

6).侧轴对齐:box-align:start | end | center | baseline | stretch

   start:弹性子元素边缘放置在弹性容器的顶端,弹性容器的额外空间放置在容器底端;end:与start值相反;center:弹性子元素靠在一起,垂直居中于弹性容器;baseline:弹性子元素根据基线对齐;

   stretch:弹性子元素填充整个容器。

7).弹性:box-flex:number

   设置弹性子元素弹性大小

8).显示顺序:box-ordinal-group:<integer>

   box-ordinal-group默认值是1。主要用来设置弹性子元素在容器中的位置顺序序列号。弹性子元素排列将根据这个属性值从小到大排列,值越大越排在后面。


小例子一枚:

 <div class="toolbar flex-box-h">

              <a>轻微博</a>

             <a>勾搭</a>

            <a>我</a>

         </div>


css代码

 .toolbar{position:absolute;height: 50px;color: ##929292;width: 100%; box-sizing:border-box;left:0;bottom:0;background-color: #f7f7f8;border-top: 1px solid #c4c4c4;-webkit-backface-visibility: hidden;

backface-visibility: hidden;;}

.flex-box-h{display: box;display: -webkit-box;box-orient:horizontal;-webkit-box-orient:horizontal;box-direction:normal;-webkit-box-direction:normal;box-align:center;-webkit-box-align:center;}

.flex-box-h a{display: block;box-flex:1;-webkit-box-flex:1;font-size:14px;text-align: center;color:#929292;}

最后是这样子的:

说明:这是一个简单的水平轴弹性盒布局,红色横线是主轴,红色竖线是侧轴。

 


© 著作权归作者所有

一只小蚂蚁
粉丝 2
博文 6
码字总数 3822
作品 0
深圳
程序员
私信 提问
弹性盒模型案例讲解

弹性盒模型的设置的方法为display:box 或display:inline-box box-orient 为定义盒模型的布局方向,由于盒模型的只有在webkit或moz的内核才生效,故我们在使用这个属性之前要在它前面加上-webk...

爱前端的小白
2017/07/06
0
0
display属性值求解

display属性值求解 run-in:根据上下文决定对象是内联对象还是块级对象。(CSS3) box:将对象作为弹性伸缩盒显示。 (伸缩盒最老版本)(CSS3) inline-box:将对象作为内联块级弹性伸缩盒显...

gcbeen
2014/12/24
178
2
WEB前端学习CSS常见面试题:看看你知道多少

Web前端开发工程师是一个很新的职业,是从事Web前端开发工作的工程师。主要进行网站开发,优化,完善的工作。网页制作是Web 1.0时代的产物,那时网站的主要内容都是静态的,用户使用网站的行...

web前端小辰
2018/05/11
0
0
CSS中各种布局的背后(*FC)

CSS中各种布局的背后,实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。 盒模型(Box Model) 上图为W3C标准盒模型,另外还有一种IE盒模型(IE6以下),唯一的...

啊咩
2018/12/10
0
0
HTML前端开发之路——弹性盒模型

弹性盒模型(Flexible Box)是一个CSS3新增布局模块,用于实现容器里项目的对齐、方向、排序; 弹性盒模型最大的特效在于,能够动态的修改子元素的宽度和高度,以满足在不同尺寸屏幕下的恰当...

LeslieMay
2016/02/12
143
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins 中文本地化的重大进展

本文首发于:Jenkins 中文社区 我从2017年开始,参与 Jenkins 社区贡献。作为一名新成员,翻译可能是帮助社区项目最简单的方法。 本地化的优化通常是较小的改动,你无需了解项目完整的上下文...

Jenkins中文社区
23分钟前
3
0
Spring中如何使用设计模式

关于设计模式,如果使用得当,将会使我们的代码更加简洁,并且更具扩展性。本文主要讲解Spring中如何使用策略模式,工厂方法模式以及Builder模式。 1. 策略模式 关于策略模式的使用方式,在S...

爱宝贝丶
31分钟前
2
0
前后端分离-前端搭建(vue)

前端使用vue,那么怎么搭建vue呢 先安装nodejs以及npm 现在基本的nodejs都包含有npm,下载安装后, 可以在cmd命令里输入 node -v 和npm -v 分别查看安装的版本 两个都显示了版本就是安装ok ...

咸鱼-李y
53分钟前
3
0
聊聊elasticsearch的DeadlockAnalyzer

序 本文主要研究一下elasticsearch的DeadlockAnalyzer DeadlockAnalyzer elasticsearch-7.0.1/server/src/main/java/org/elasticsearch/monitor/jvm/DeadlockAnalyzer.java public class Dea......

go4it
54分钟前
2
0
微信点击链接,用默认浏览器中打开指定网址链接!

最近有客户咨询,自己的链接在微信种推广,经常会被无缘无故封杀,有没有一种功能,用户在微信中点击我们推广的链接,可以自动强制跳转到手机默认浏览器中打开指定的网址链接?这样我们的网址...

家布朗根
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部