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属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

随机推荐

A8
组员:陈锦谋今日内容: PS学习.抠图.图标像素调整明日计划: 继续小组内安排的任务困难: 无
团队作业4——第一次项目冲刺（Alpha版本)第三次
一.会议内容制定任务内容制作leangoo表格初步工作二.各人工作成员计划任务遇见难题贡献比塗家瑜(组长) api搭建无 1 张新磊数据库搭建完成无 1 姚燕彬功能测试无 ...
TCP系列47—拥塞控制—10、FACK下的快速恢复与PRR
一.概述 FACK下的重传我们在之前的重传部分已经进行了介绍,这里简单介绍一下随着FACK提出的拥塞控制算法的改进及随后的进一步改进. 从我们之前介绍的RFC2582和RFC5681中可以看到,快速恢 ...
TCP系列46—拥塞控制—9、SACK下的快速恢复与Limited transmit
一.概述 1.SACK下的特殊处理过程 SACK下的拥塞控制处理是linux中拥塞控制的实现依据,再次强调一遍RFC6675的重要性,linux中拥塞控制主体框架的实现是与RFC6675一致的,所以如 ...
url传带有汉字的参数乱码解决
url传带有汉字的参数乱码解决 var reg = new RegExp("(^|&)createName=([^&]*)(&|$)"); var r = ...
Vue于React特性对比（二）
一,关于响应式数据更新方式的实现 1)只有在data里面定义的数据才会有响应式更新 vue依赖的defineProperty的数据劫持加上依赖数据,实现数据的响应式更新.可以称之为依赖式的响应.因为依 ...
Ubuntu 16.04 LTS安装sogou输入法详解
http://blog.csdn.net/qq_21792169/article/details/53152700 最近开始学习linux 在安装输入法中遇到的一些问题,最终成功安装,也得益于网络上的 ...
PHP关于传众多参数还是传上下文对象的性能测试
在开发微信公众平台平台的过程中,有这么几个参数总是需要传来传去,$userOpenId,$message,$time. 在整个程序的运行过程中,为了函数方便的处理,将这三个变量一直放在参数列表里.关于 ...
postman 断言学习
请求 url :https://www.v2ex.com/api/nodes/show.json?name=python get请求 postman发起请求并做断言断言: tests["B ...
ios基础动画、关键帧动画、动画组、转场动画等
概览在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌.在这里你可以看到iOS中如何使用图层精简非交互式绘图,如何通过核心动画创建基础动画.关键帧动画 ...

Flex布局之box-flex

Flex布局之box-flex的更多相关文章

随机推荐

热门专题