Flex布局之box-flex
box-flex的写法比flex的写法要复杂一些，兼容性的前缀要多带几个，真希望有一天flex布局能够纳入w3c标准啊！
<!DOCTYPE html>
<html>
<head>
<style>
.container{
width:80%;
margin:auto;
min-height:500px;
display: -moz-box;
display: -webkit-box;
display: box;
}
.item-1{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
.item-2{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
.item-3{
-moz-box-flex: 1;
-webkit-box-flex: 1;
box-flex: 1;
}
</style>
</head>
<body>
<div class="container">
<div class="item item-1">item 1</div>
<div class="item item-2">item 2</div>
<div class="item item-3">item 3</div>
</div>
</body>
</html>
box-orient, box-direction, box-align, box-pack, box-lines
box-orient
box-orient用来确定子元素的方向。是横着排还是竖着走。可选的值有：
horizontal | vertical | inline-axis | block-axis | inherit
其中，inline-axis是默认值。且horizontal与inline-axis的表现似乎一致的，让子元素横排；而vertical与block-axis的表现也是一致的，让元素纵列。
box-direction
box-direction是用来确定子元素的排列顺序，可选值有：
normal | reverse | inherit
box-align
box-align与box-pack都是决定盒子内部剩余空间怎么使用的。在行为效果上就是表现为“对齐”。
其中box-align决定了垂直方向上的空间利用，也就是垂直方向上的对齐表现。为了便于记忆，我们可以拿来和CSS2中的vertical-align隐射记忆，两者都有”align”，都是都是垂直方向的对齐；而剩下的box-pack就是水平方向的了。
box的可选参数有：
start | end | center | baseline | stretch
其中stretch为默认值，为拉伸，也就是父标签高度多高，其孩子元素的高度就多高。
box-pack
box-pack决定了父标签水平遗留空间的使用，其可选值有：
start | end | center | justify
就大部分的行为表现来说分别对应text-align属性的值：left | right | center | justify；但是，之所以box-pack不使用”left”, 而是”start”，是因为box-direction属性，这玩意可以反转原本的排列，原本的“左对齐”反转后结果是“右对齐”了，此时”left”显然就词不达意了，所以使用”start”更具有概括性，就是与父标签的起始位置对齐，从而不会产生语义与行为上的困扰。
box-lines
box-lines是用来决定子元素是可以换行显示呢？还是就算挤出油还是单行显示。两个可选值：
single | multiple
其中single是默认值，表示死活不换行。
==================更新于2016年3月25日=============
| box-align | 子元素在盒子内垂直方向上的空间分配方式 |
| box-pack | 子元素在盒子内水平方向上的空间分配方式 |
| box-direction | 盒子的显示顺序 |
| box-flex | 子元素在盒子内的自适应尺寸 |
| box-flex-group | 自适应子元素组群 |
| box-lines | 子元素分列显示，空间溢出显示 |
| box-ordinal-group | 子元素在盒子内的显示位置 |
| box-orient | 盒子分布的坐标轴 |
先写几个div，给上不同的颜色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>box-orient</title>
<style type="text/css">
div { height:50px; }
#box1 { background:#F6F; }
#box2 { background:#3F9; }
#box3 { background:#FC0; } </style>
</head> <body>
<div id="box1">盒子1</div>
<div id="box2">盒子2</div>
<div id="box3">盒子3</div>
</body>
</html>
然后给body加上display:box和box-orient属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>box-orient</title>
<style type="text/css">
div { height:50px; }
#box1 { background:#F6F; }
#box2 { background:#3F9; }
#box3 { background:#FC0; }
body{
display : -moz-box;
display : -webkit-box;
display : box;
box-orient: horizontal;
-mozbox-box-orient: horizontal;
-webkit-box-orient:horizontal;
}
</style>
</head> <body>
<div id="box1">盒子1</div>
<div id="box2">盒子2</div>
<div id="box3">盒子3</div>
</body>
</html>
结果如下
比什么display:inline-block强多了。
再给body加上box-direction属性，可以使色块反向
body{
display : -moz-box;
display : -webkit-box;
display : box;
box-orient: horizontal;
-mozbox-box-orient: horizontal;
-webkit-box-orient:horizontal;
-moz-box-direction : reverse;
-webkit-box-direction : reverse;
box-direction : reverse;
}
box-direction的属性值要么是normal要么就是reverse，inherit什么的不重要。
ordinal的意思是序数词，顺序数的意思，而box-ordinal-group的意思就是指子元素在box中的顺序位置
我们可以这样来设置box-ordinal-group
#box1 {
-moz-box-ordinal-group :;
-webkit-box-ordinal-group :;
box-ordinal-group :;
}
#box2 {
-moz-box-ordinal-group :;
-webkit-box-ordinal-group :;
box-ordinal-group :;
}
#box3 {
-moz-box-ordinal-group :;
-webkit-box-ordinal-group :;
box-ordinal-group :;
}
#box4 {
-moz-box-ordinal-group :;
-webkit-box-ordinal-group :;
box-ordinal-group :;
}
再来讲box-flex这个属性
box-flex属性能够灵活地控制子元素在盒子中的显示空间（宽度和高度），即子元素在盒子中所占的面积。
这个属性很重要，它解决了传统设计中习惯使用百分比定义弹性布局的弊端。
box-flex的值是一个number，可以是整数或者小数。
当盒子中包含多个定义了box-flex属性的子元素时，浏览器会把这些子元素的box-flex属性值相加，然后根据它们各自的值占总值的比例来分配盒子剩余的空间。
先讲下大概的思路
在使用box-flex之前，我们要把父容器的display设置成box
#father { display: box; }
关于display:box的兼容性写法请参看flexbox兼容性写法，这里不具体说明。
然后就可以给father的boys们分房子了
#first_boy { box-flex:; }
#second_boy { box-flex:; }
#three_boy { box-flex:; }
大概的结果会是这个样子
这样的分法是比较均衡的，还有一些不均衡的分法，比如三儿子先指定要多大的空间，大儿子和二儿子再分剩下来的空间。
#first_boy { box-flex:; }
#second_boy { box-flex:; }
#three_boy { width: 300px; }
有了这样的思路，我们可以写一个比较完整的CSS Demo
#box {
margin:auto;
text-align:left;
width:1000px;
overflow:hidden;
}
#box {
display : -moz-box;
display : -webkit-box;
display : box;
box-orient: horizontal;
-mozbox-box-orient: horizontal;
-webkit-box-orient:horizontal;
}
#box1 {width:200px;}
#box2, #box3 {
border:solid 1px #CCC;
margin:2px;
}
#box2 {
-moz-box-flex:;
-webkit-box-flex:;
box-flex:;
}
#box3 {
-moz-box-flex:;
-webkit-box-flex:;
box-flex:;
}
当弹性与非弹性元素混合排版时，有可能会出现所有子元素的尺寸大于或小于盒子的尺寸，从而出现盒子空间不足或者富余的情况，这时就需要一种方法来管理盒子的空间。
如果子元素的总尺寸小于盒子的尺寸，则可以使用box-align和box-pack属性进行管理。
box-pack属性可以在水平方向上对盒子的富余空间进行管理。
---start：所有子元素都显示在盒子的左侧，富余空间在右侧。
---end：与start相反。
---justify：富余的空间在子元素之间平均分配。
---center：富余的空间在盒子的两侧平均分配。
box-align属性可以在垂直方向上对盒子的富余空间进行管理。
---start：所有子元素沿盒子的上边缘排列，都显示在盒子的上部，富余的空间显示在盒子底部。
---end：与start相反。
---center：富余的空间在盒子的上下两侧平均分配，上面下面各一半。
---baseline：所有盒子沿着它们的基线排列，富余的空间可前可后显示。
---stretch：每个子元素的高度被调整到适合盒子的高度显示。stretch是延伸的意思。
举个栗子
body {
margin:;
padding:;
display : -moz-box;
display : -webkit-box;
display : box;
-moz-box-orient : horizontal;
-webkit-box-orient : horizontal;
box-orient : horizontal;
-moz-box-pack : center;
-webkit-box-pack : center;
box-pack : center;
-moz-box-align : center;
-webkit-box-align : center;
box-align : center;
background: #04082b url(images/map1.jpg) no-repeat top center;
}
这也是一个很好的居中方法。
box-pack和box-align会导致盒子内的元素很容易跑出盒子的包围圈，这种现象被称为空间溢出。
我们可以用overflow来处理溢出，当然，flexbox也提供了专门的属性来进行空间溢出管理，那就是：box-lines。
它有两个属性值：
single：所有子元素都单行或者单列显示。
multiple：所有子元素都多行或者多列显示。
文章来源：
张鑫旭的博客
http://www.zhangxinxu.com/wordpress/2010/12/css-box-flex%E5%B1%9E%E6%80%A7%EF%BC%8C%E7%84%B6%E5%90%8E%E5%BC%B9%E6%80%A7%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B%E7%AE%80%E4%BB%8B/
Flex布局之box-flex的更多相关文章
- css总结2：Flex 布局教程：Flex 语法（转）
Flex 布局教程:语法篇 网页布局(layout)是 CSS 的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些 ...
- Flex 布局教程：语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
- 【转】Flex 布局语法教程
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- flex布局
一,啥是flex? 1.Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ displa ...
- Flex 布局
Flex 布局 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非 ...
- Flex布局窥探（一）
一.Flex布局是神马? Flex是Flexible Box的缩写,意为‘弹性布局’,用来为盒模型提供最大的灵活性. 任何容器都能被指定为Flex布局: .box{ display: flex; } ...
- Flex 布局教程：语法篇[转]
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
- Flex布局语法与实践
一.参考文献 阮一峰 Flex布局的语法 阮一峰 Flex布局的实践 二.Flex语法 (一)Flex是什么 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状 ...
- Flex布局总结
2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能.lex布局将成为未来布局 ...
- Flex 布局教程：语法篇（转）
网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...
随机推荐
- 软工 · BETA 版冲刺前准备（团队）
软工 · BETA 版冲刺前准备(团队) 过去存在的问题 组员之间缺乏沟通,前后端缺乏沟通协作 组员积极性不高 基础知识不够扎实 手动整合代码效率过低 我们已经做了哪些调整/改进 通过会议加强组员之间 ...
- javascript方法扩展
String.prototype.startWith = function(str){ return str.indexOf(str) == 0; }; var str = "abc&quo ...
- 浅析GCC下C++多重继承 & 虚拟继承的对象内存布局
继承是C++作为OOD程序设计语言的三大特征(封装,继承,多态)之一,单一非多态继承是比较好理解的,本文主要讲解GCC环境下的多重继承和虚拟继承的对象内存布局. 一.多重继承 先看几个类的定义: 01 ...
- 软工网络15团队作业4——Alpha阶段敏捷冲刺-5
一.当天站立式会议照片: 二.项目进展 昨天已完成的工作: 日期等细致信息的处理,对添加账单日期化. 明天计划完成的工作: 完成对账单的编辑,删除等操作,以及开始服务器的编写工作 工作中遇到的困难: ...
- 对scrum站立会议的理解
个人理解:首先我不明白scrum的含义,查了一下,scrum是迭代式增量软件开发过程,通常用于敏捷开发.scrum包括了一系列实践和预定义角色的过程骨架.scrum中的主要角色包括同项目经理类似的sc ...
- paoding rose controller包及文件名命名规则
1.包命名规则:xxx.xxx.controllers(否则扫描不到)
- VisualStudio2013 代码查看优化 对齐线
http://jingyan.baidu.com/article/363872eccef5276e4ba16f91.html
- delphi完美经典--第十八章
第18章数据感知组件 一.TDBText组件 用来以只读.一次一条记录的方式,显示DataSet中的某一字段值.因同样继承自TCustomLabel,TDBText组件除了数据感知功能外,与标准组件T ...
- 【前端学习笔记】call、apply、bind方法
1.call()方法: // move函数实现移动平面图上一个点位置功能 var move = function(x,y){ this.x += x; this.y += y; } // 定一个点p ...
- 对ViewModel自定义约束
有时候我们常要对一些属性进行自定义的约束,可以这么做 using ListSys.Entity; using System; using System.Collections; using Syste ...